{"id":5106,"date":"2017-07-14T18:32:10","date_gmt":"2017-07-14T18:32:10","guid":{"rendered":"https:\/\/cheesecakelabs.com\/blog\/?p=5106\/"},"modified":"2024-03-14T13:15:06","modified_gmt":"2024-03-14T13:15:06","slug":"css-architecture-reactjs","status":"publish","type":"post","link":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/","title":{"rendered":"CSS Architecture with ReactJS"},"content":{"rendered":"\n<p><span style=\"font-weight: 400;\">We are living in <\/span>a new today, every day, filled with new tools and paradigms.<\/p>\n\n\n\n<p>We often catch ourselves trying to apply yesterday&#8217;s architectures to new technologies, which can end badly<span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">One of these cases is BEM \u2013 a CSS naming convention \u2013 which solves a problem that we maybe don&#8217;t have anymore.<\/span><\/p>\n\n\n\n<p>But first things first.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>What is BEM?<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">BEM is a naming convention for CSS with a simple and direct philosophy: code consistency, scalability, and reusability.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The methodology is based on its name: Block-Element-Modifier. This means that your classes will be split between three entities, with one with a different objective and role in your architecture and code organization:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Block: <\/b><span style=\"font-weight: 400;\">Independent logical<\/span> and functional<span style=\"font-weight: 400;\"> components.<\/span><\/li>\n\n\n\n<li><b>Element: <\/b><span style=\"font-weight: 400;\">A part of a block that has no standalone meaning.<\/span><\/li>\n\n\n\n<li><b>Modifier: <\/b><span style=\"font-weight: 400;\">Define the behavior and the appearance of a block or element.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">When talking about selectors with BEM we have three little rules:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><span style=\"font-weight: 400;\">Only use CSS classes.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Class names can contain numbers and should not contain special characters.<\/span><\/li>\n\n\n\n<li><span style=\"font-weight: 400;\">Individual words are separated by a hyphen.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">BEM entities should look like this:<\/span><span style=\"font-weight: 400;\"><br><\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/* The name of the block, which is also the namespace of its elements and modifiers.*\/<\/span>\n&lt;<span class=\"hljs-selector-tag\">b<\/span>&gt;<span class=\"hljs-selector-class\">.block<\/span>\n&lt;\/<span class=\"hljs-selector-tag\">b<\/span>&gt;\n<span class=\"hljs-comment\">\/* The block namespace followed by a double underscore and the element name. *\/<\/span>\n&lt;<span class=\"hljs-selector-tag\">b<\/span>&gt;<span class=\"hljs-selector-class\">.block__element<\/span>\n&lt;\/<span class=\"hljs-selector-tag\">b<\/span>&gt;\n<span class=\"hljs-comment\">\/* The block or element namespace followed by a double hyphen and the modifier name. *\/<\/span>\n&lt;<span class=\"hljs-selector-tag\">b<\/span>&gt;<span class=\"hljs-selector-class\">.block--modifier<\/span>, <span class=\"hljs-selector-class\">.block__element--modifier<\/span>&lt;\/<span class=\"hljs-selector-tag\">b<\/span>&gt;\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Why should I use it?<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The BEM philosophy was created based on a few premises: code consistency, scalability, reusability, productivity,<\/span> and teamwork. With that in <span style=\"font-weight: 400;\">mind is good to say that BEM is already adopted by many developers around the globe and big companies such as Google and Twitter.<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><span style=\"font-weight: 400;\">If you wanna learn more about this methodology, check this article about <\/span><a href=\"https:\/\/cheesecakelabs.com\/blog\/blog\/css-architecture-first-steps\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">CSS Architectures<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<\/blockquote>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Powering Up<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">When it comes to naming convention and organization, BEM rocks. It&#8217;s simple and functional.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Still, when we talk about CSS Architectures there&#8217;s another point we should care about: folder structure. And that&#8217;s when we mix one more architecture into the recipe: <strong>ITCSS<\/strong>.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">ITCSS is a methodology introduced by Harry Roberts to help create, manage, and scale large CSS projects. In his own words:<\/span><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p><span style=\"font-weight: 400;\">This is a methodology that involves visualising your entire CSS project as a layered, upside-down triangle. This hierarchical shape represents a model that will help you order your CSS in the most effective, least wasteful way.<\/span><\/p>\n<\/blockquote>\n\n\n\n<p><span style=\"font-weight: 400;\">I won\u2019t dig deep into this methodology but I recommend reading <\/span><a href=\"http:\/\/www.creativebloq.com\/web-design\/manage-large-css-projects-itcss-101517528\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Harry&#8217;s post<\/span><\/a><span style=\"font-weight: 400;\"> to get the concepts behind it.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">In a few words it proposes organizing the code in layers, structured as an <strong>inverted triangle<\/strong>, where we start with the most generic elements on the top, and finish with the most specific elements on the bottom.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The key point here is that we can use the layers as an effective folder structure to organize our code. On my previous experiences, I used this methodology a little bit different than its original proposal, having the code set up on these layers:<\/span><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><b>Settings: <\/b><span style=\"font-weight: 400;\">Basic configurations and variables.<\/span><\/li>\n\n\n\n<li><b>Tools: <\/b><span style=\"font-weight: 400;\">Functions and mixins.<\/span><\/li>\n\n\n\n<li><b>Base:<\/b><span style=\"font-weight: 400;\"> Basic styles that will be applied to every page. It&#8217;s a good place to put <\/span><i><span style=\"font-weight: 400;\">reset<\/span><\/i><span style=\"font-weight: 400;\">\/<\/span><i><span style=\"font-weight: 400;\">normalize<\/span><\/i><span style=\"font-weight: 400;\"> code.<\/span><\/li>\n\n\n\n<li><b>Components:<\/b><span style=\"font-weight: 400;\"> UI chunks that compose the interface.<\/span><\/li>\n\n\n\n<li><b>Utilities: <\/b><span style=\"font-weight: 400;\">Very specific rules, it&#8217;s the only layer that you can use <\/span><i><span style=\"font-weight: 400;\">!important<\/span><\/i><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n\n\n\n<p><span style=\"font-weight: 400;\">Now everything we need is to mix these two methodologies and we&#8217;ll end up with a powerful and yet simple CSS architecture in our hands.<\/span><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1950\" height=\"1872\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-14.05.21.png\" alt=\"BEM CSS Project Structure\" class=\"wp-image-5108\" srcset=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-14.05.21.png 1950w, https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-14-at-14.05.21-768x737.png 768w\" sizes=\"(max-width: 1950px) 100vw, 1950px\" \/><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\"><strong>A ReactJS Approach<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The <strong>BEM+ITCSS<\/strong> architecture was all we needed in the past years until everything changed. <strong>ReactJS<\/strong> became one of the main SPA libraries, in which the way of thinking in components is kinda different than before.<\/span><\/p>\n\n\n\n<p>Now, every component is a JS module where the HTML structure is totally related to it and you can dynamically change your component states and variations via its custom properties. You don&#8217;t only link style tags to a semantic HTML structure anymore, you now have the power to create totally logical, dynamic,<span style=\"font-weight: 400;\"> and functional components.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">So how do we approach our styles and code organization in this new scenario?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Keep our style isolated from our React components, using the BEM+ITCSS methodology, or change radically with a <strong>CSS-in-JS<\/strong> approach?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">I would suggest staying somewhere in between and using the advantages of our previous knowledge.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>The Think-Adapt- First Approach<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The idea of using these methodologies and naming conventions started with a few reasons in mind: keeping styles isolated, creating unique selectors, and clarifying the relationship between selectors within a component scope.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">No one uses <strong>BEM<\/strong> conventions because they like to type double underlines or double hyphens, but it definitely helps with code consistency, scalability, reuse, productivity,<\/span> and predictability. Those are all viable premises, so why not keep using them<span style=\"font-weight: 400;\">?<\/span><\/p>\n\n\n\n<p><b>Because we can&#8217;t<\/b><span style=\"font-weight: 400;\">. The project architecture changed when we decided to introduce <strong>React<\/strong> in the equation. With that, a few restrictions, patterns, and new possibilities appeared.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">This is a perfect time to adapt our previous rules to this new context. And here&#8217;s another lib I strongly recommend including in your toolbelt.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>CSS Modules<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">To explain all the advantages and functionalities of <strong>CSS Modules<\/strong>, I\u2019d rather use the words of its creator, <\/span><a href=\"https:\/\/glenmaddern.com\/articles\/css-modules\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">Glen Maddern<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The overall idea here \u2013 besides thousands of benefits you get from it \u2013 is <strong>CSS local scopes<\/strong>. Now, all React components can be totally isolated in a logical and presentational state. This is how the structure looks like:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-2\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\">\u2514\u2500\u2500 <span class=\"hljs-selector-tag\">button<\/span>\n \u251c\u2500\u2500 <span class=\"hljs-selector-tag\">index<\/span><span class=\"hljs-selector-class\">.js<\/span>\n \u2514\u2500\u2500 <span class=\"hljs-selector-tag\">styles<\/span><span class=\"hljs-selector-class\">.css<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-2\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">There\u2019s no need to remain with the classic BEM convention inside <code class=\"language-javascript\">styles.css<\/code>. There, we should use the first entity as the component namespace, but now with CSS Modules, this relationship is dynamically created based on the JS component name. Behind the scenes it work this way:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-3\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-comment\">\/*\n* Reset\n*\/<\/span>\n<span class=\"hljs-selector-class\">.button<\/span> {\n  <span class=\"hljs-attribute\">appearance<\/span>: none;\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">0<\/span>;\n  <span class=\"hljs-attribute\">background-color<\/span>: white;\n  <span class=\"hljs-attribute\">cursor<\/span>: pointer;\n  <span class=\"hljs-attribute\">color<\/span>: <span class=\"hljs-number\">#333<\/span>;\n  <span class=\"hljs-attribute\">font-size<\/span>: .<span class=\"hljs-number\">9rem<\/span>;\n  <span class=\"hljs-attribute\">font-weight<\/span>: bold;\n}\n<span class=\"hljs-selector-class\">.button<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span>,\n<span class=\"hljs-selector-class\">.button<\/span><span class=\"hljs-selector-pseudo\">:focus<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#51a7e8<\/span>;\n  <span class=\"hljs-attribute\">box-shadow<\/span>: <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">0<\/span> <span class=\"hljs-number\">5px<\/span> <span class=\"hljs-built_in\">rgba<\/span>(<span class=\"hljs-number\">81<\/span>, <span class=\"hljs-number\">167<\/span>, <span class=\"hljs-number\">232<\/span>, .<span class=\"hljs-number\">5<\/span>);\n  <span class=\"hljs-attribute\">outline<\/span>: <span class=\"hljs-number\">0<\/span>;\n}\n<span class=\"hljs-comment\">\/*\n* Sizes\n*\/<\/span>\n<span class=\"hljs-selector-class\">.small<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: .<span class=\"hljs-number\">5em<\/span> <span class=\"hljs-number\">1.4em<\/span>;\n}\n<span class=\"hljs-selector-class\">.medium<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: .<span class=\"hljs-number\">8em<\/span> <span class=\"hljs-number\">1.4em<\/span>;\n}\n<span class=\"hljs-selector-class\">.large<\/span> {\n  <span class=\"hljs-attribute\">padding<\/span>: <span class=\"hljs-number\">1.2em<\/span> <span class=\"hljs-number\">2.2em<\/span>;\n}\n<span class=\"hljs-comment\">\/*\n* Themes\n*\/<\/span>\n<span class=\"hljs-selector-class\">.default<\/span> {\n  <span class=\"hljs-attribute\">border<\/span>: <span class=\"hljs-number\">1px<\/span> solid <span class=\"hljs-number\">#ddd<\/span>;\n  <span class=\"hljs-attribute\">border-radius<\/span>: <span class=\"hljs-number\">3px<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(to bottom, #fefefe <span class=\"hljs-number\">0%<\/span>, #ddd <span class=\"hljs-number\">100%<\/span>);\n}\n<span class=\"hljs-selector-class\">.default<\/span><span class=\"hljs-selector-pseudo\">:hover<\/span> {\n  <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#bbb<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-number\">#ddd<\/span>;\n}\n<span class=\"hljs-selector-class\">.default<\/span><span class=\"hljs-selector-pseudo\">:active<\/span> {\n  <span class=\"hljs-attribute\">border-color<\/span>: <span class=\"hljs-number\">#aaa<\/span>;\n  <span class=\"hljs-attribute\">background<\/span>: <span class=\"hljs-built_in\">linear-gradient<\/span>(to bottom, #bbb <span class=\"hljs-number\">0%<\/span>, #ddd <span class=\"hljs-number\">44%<\/span>);\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-3\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">And inside of your component, you just include the classes you need depending on its rules. Our button example can be described this way:<\/span><\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:100%\"><pre class=\"wp-block-code\" aria-describedby=\"shcb-language-4\" data-shcb-language-name=\"CSS\" data-shcb-language-slug=\"css\"><span><code class=\"hljs language-css\"><span class=\"hljs-selector-tag\">import<\/span> <span class=\"hljs-selector-tag\">PropTypes<\/span> <span class=\"hljs-selector-tag\">from<\/span> '<span class=\"hljs-selector-tag\">prop-types<\/span>'\n<span class=\"hljs-selector-tag\">import<\/span> <span class=\"hljs-selector-tag\">React<\/span> <span class=\"hljs-selector-tag\">from<\/span> '<span class=\"hljs-selector-tag\">react<\/span>'\n<span class=\"hljs-selector-tag\">import<\/span> <span class=\"hljs-selector-tag\">styles<\/span> <span class=\"hljs-selector-tag\">from<\/span> '.\/<span class=\"hljs-selector-tag\">styles<\/span><span class=\"hljs-selector-class\">.css<\/span>'\n\n<span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">const<\/span> <span class=\"hljs-selector-tag\">ButtonType<\/span> = {\n  <span class=\"hljs-attribute\">BUTTON<\/span>: <span class=\"hljs-string\">'button'<\/span>,\n  RESET: <span class=\"hljs-string\">'reset'<\/span>,\n  SUBMIT: <span class=\"hljs-string\">'submit'<\/span>,\n}\n<span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">const<\/span> <span class=\"hljs-selector-tag\">ButtonTheme<\/span> = {\n  <span class=\"hljs-attribute\">DEFAULT<\/span>: <span class=\"hljs-string\">'default'<\/span>,\n  POSITIVE: <span class=\"hljs-string\">'positive'<\/span>,\n  DANGER: <span class=\"hljs-string\">'danger'<\/span>,\n}\n<span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">const<\/span> <span class=\"hljs-selector-tag\">ButtonSize<\/span> = {\n  <span class=\"hljs-attribute\">SMALL<\/span>: <span class=\"hljs-string\">'small'<\/span>,\n  MEDIUM: <span class=\"hljs-string\">'medium'<\/span>,\n  LARGE: <span class=\"hljs-string\">'large'<\/span>,\n}\n\n<span class=\"hljs-selector-tag\">const<\/span> <span class=\"hljs-selector-tag\">Button<\/span> = ({ type, onClick, children, theme, size }) =&gt; {\n  const className = `${styles.button} ${styles&#91;theme]} ${styles&#91;size]}`\n  <span class=\"hljs-selector-tag\">return<\/span> (&lt;<span class=\"hljs-selector-tag\">button<\/span> <span class=\"hljs-selector-tag\">type<\/span>=\"{type}\"&gt;{children}&lt;\/<span class=\"hljs-selector-tag\">button<\/span>&gt;)\n}\n<span class=\"hljs-selector-tag\">Button<\/span><span class=\"hljs-selector-class\">.propTypes<\/span> = {\n  <span class=\"hljs-attribute\">type<\/span>: PropTypes.<span class=\"hljs-built_in\">oneOf<\/span>(Object.keys(ButtonType)),\n  theme: PropTypes.<span class=\"hljs-built_in\">oneOf<\/span>(Object.keys(ButtonTheme)),\n  size: PropTypes.<span class=\"hljs-built_in\">oneOf<\/span>(Object.keys(ButtonSize)),\n  onClick: PropTypes.func.isRequired,\n  children: PropTypes.node.isRequired,\n}\n<span class=\"hljs-selector-tag\">Button<\/span><span class=\"hljs-selector-class\">.defaultProps<\/span> = {\n  <span class=\"hljs-attribute\">type<\/span>: ButtonType.BUTTON,\n  theme: ButtonTheme.DEFAULT,\n  size: ButtonSize.MEDIUM,\n}\n<span class=\"hljs-selector-tag\">export<\/span> <span class=\"hljs-selector-tag\">default<\/span> <span class=\"hljs-selector-tag\">Button<\/span>\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-4\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">CSS<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">css<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre><\/div>\n<\/div>\n\n\n\n<p><span style=\"font-weight: 400;\">Ok. Now we have the solution for the components\u2019 layer.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">What about global styles, such as settings, normalizes and resets?<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>ITCSS Revival<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The layered folder structure based on ITCSS still fits perfectly with<\/span> our needs, so why not continue<span style=\"font-weight: 400;\"> using it?<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">The idea is to create the same styles folder inside our <code class=\"language-javascript\">src<\/code> project, except the components folder, because they are already defined by the React default project layout.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">Now, we have something like that:<\/span><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"697\" height=\"553\" src=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Screen-Shot-2017-07-12-at-16.24.55.png\" alt=\"ITCSS with ReactJS Project\" class=\"wp-image-5109\"\/><\/figure>\n\n\n\n<p><span style=\"font-weight: 400;\">Using the <code class=\"language-javascript\">:global<\/code> tag, we can import the style file inside your main application making your styles available globally as a normal class.<\/span><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Again, the Think-Adapt-First<\/strong><\/h2>\n\n\n\n<p><span style=\"font-weight: 400;\">The idea behind this organization is to help you create better <strong>ReactJS<\/strong> projects by keeping your <strong>CSS architecture<\/strong> in a way that you can scale and keep it sustainable, even with thousands of components and developers working on it.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">However, the real point here is to open your mind and give you the idea of <strong>adaptation<\/strong>!<\/span><\/p>\n\n\n\n<p>Sometimes it\u2019s hard to adapt because you gotta let go of<span style=\"font-weight: 400;\"> things that were hard to master, but don\u2019t forget that the problems you solved may not even exist anymore.<\/span><\/p>\n\n\n\n<p><span style=\"font-weight: 400;\">So, young pilgrims, keep<\/span> searching for <span style=\"font-weight: 400;\">knowledge.<\/span><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span style=\"font-weight: 400;\">Sources and extra reading material:<\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/www.xfive.co\/blog\/itcss-scalable-maintainable-css-architecture\/\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">ITCSS &#8211; Scalable Maintainable CSS Architecture<\/span><\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.jamesturneronline.net\/blog\/bemit-naming-convention.html\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">BEMIT Naming Convention<\/span><\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/www.creativebloq.com\/web-design\/manage-large-css-projects-itcss-101517528\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">ITCSS &#8211; Manage Large CSS Projects<\/span><\/a><\/li>\n\n\n\n<li><a href=\"http:\/\/getbem.com\/\"><span style=\"font-weight: 400;\">GETBEM<\/span><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/medium.com\/nulogy\/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">How To Use CSS Modules With CreateReactApp<\/span><\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/glenmaddern.com\/articles\/css-modules\" target=\"_blank\" rel=\"noreferrer noopener\"><span style=\"font-weight: 400;\">CSS Modules<\/span><\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>We are living in a new today, every day, filled with new tools and paradigms. We often catch ourselves trying to apply yesterday&#8217;s architectures to new technologies, which can end badly. One of these cases is BEM \u2013 a CSS naming convention \u2013 which solves a problem that we maybe don&#8217;t have anymore. But first [&hellip;]<\/p>\n","protected":false},"author":65,"featured_media":5112,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6,432],"tags":[302],"class_list":["post-5106","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-product-design","category-engineering","tag-tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>CSS Architecture with ReactJS<\/title>\n<meta name=\"description\" content=\"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Architecture with ReactJS\" \/>\n<meta property=\"og:description\" content=\"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\" \/>\n<meta property=\"og:site_name\" content=\"Cheesecake Labs\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/cheesecakelabs\" \/>\n<meta property=\"article:published_time\" content=\"2017-07-14T18:32:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-14T13:15:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png\" \/>\n\t<meta property=\"og:image:width\" content=\"2000\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Cheesecake Labs\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:site\" content=\"@cheesecakelabs\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\"},\"author\":{\"name\":\"Douglas da Silva\"},\"headline\":\"CSS Architecture with ReactJS\",\"datePublished\":\"2017-07-14T18:32:10+00:00\",\"dateModified\":\"2024-03-14T13:15:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\"},\"wordCount\":1153,\"commentCount\":1,\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png\",\"keywords\":[\"ReactJS\"],\"articleSection\":[\"Product Design\",\"Engineering\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\",\"name\":\"CSS Architecture with ReactJS\",\"isPartOf\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png\",\"datePublished\":\"2017-07-14T18:32:10+00:00\",\"dateModified\":\"2024-03-14T13:15:06+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Douglas da Silva\"},\"description\":\"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.\",\"breadcrumb\":{\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png\",\"width\":2000,\"height\":720,\"caption\":\"CSS Architecture with ReactJS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cheesecakelabs.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Architecture with ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#website\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"name\":\"Douglas da Silva\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglas-da-silva.jpeg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglas-da-silva.jpeg\",\"caption\":\"Douglas da Silva\"},\"description\":\"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.\",\"url\":\"https:\/\/cheesecakelabs.com\/blog\/autor\/douglasgimli\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Architecture with ReactJS","description":"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/","og_locale":"en_US","og_type":"article","og_title":"CSS Architecture with ReactJS","og_description":"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.","og_url":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/","og_site_name":"Cheesecake Labs","article_publisher":"https:\/\/www.facebook.com\/cheesecakelabs","article_published_time":"2017-07-14T18:32:10+00:00","article_modified_time":"2024-03-14T13:15:06+00:00","og_image":[{"width":2000,"height":720,"url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png","type":"image\/png"}],"author":"Cheesecake Labs","twitter_card":"summary_large_image","twitter_creator":"@cheesecakelabs","twitter_site":"@cheesecakelabs","twitter_misc":{"Written by":null,"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#article","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/"},"author":{"name":"Douglas da Silva"},"headline":"CSS Architecture with ReactJS","datePublished":"2017-07-14T18:32:10+00:00","dateModified":"2024-03-14T13:15:06+00:00","mainEntityOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/"},"wordCount":1153,"commentCount":1,"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png","keywords":["ReactJS"],"articleSection":["Product Design","Engineering"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/","url":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/","name":"CSS Architecture with ReactJS","isPartOf":{"@id":"https:\/\/cheesecakelabs.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage"},"image":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage"},"thumbnailUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png","datePublished":"2017-07-14T18:32:10+00:00","dateModified":"2024-03-14T13:15:06+00:00","author":{"@type":"person","name":"Douglas da Silva"},"description":"The idea behind this organization is to help you create better ReactJS projects by structuring and scaling your CSS architecture.","breadcrumb":{"@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#primaryimage","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/07\/Banner_css.png","width":2000,"height":720,"caption":"CSS Architecture with ReactJS"},{"@type":"BreadcrumbList","@id":"https:\/\/cheesecakelabs.com\/blog\/css-architecture-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cheesecakelabs.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS Architecture with ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/cheesecakelabs.com\/blog\/#website","url":"https:\/\/cheesecakelabs.com\/blog\/","name":"Cheesecake Labs","description":"Nearshore outsourcing company for Web and Mobile design and engineering services, and staff augmentation for startups and enterprises..","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cheesecakelabs.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","name":"Douglas da Silva","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cheesecakelabs.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglas-da-silva.jpeg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglas-da-silva.jpeg","caption":"Douglas da Silva"},"description":"10 years of experience in Marketing and Sales in the Technology sector. My main purpose is help, support and structure efficient operations and also develop independent and multidisciplinary teams.","url":"https:\/\/cheesecakelabs.com\/blog\/autor\/douglasgimli\/"}]}},"_links":{"self":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5106","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/comments?post=5106"}],"version-history":[{"count":2,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5106\/revisions"}],"predecessor-version":[{"id":11870,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/posts\/5106\/revisions\/11870"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media\/5112"}],"wp:attachment":[{"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/media?parent=5106"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/categories?post=5106"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cheesecakelabs.com\/blog\/wp-json\/wp\/v2\/tags?post=5106"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}