{"id":5111,"date":"2017-07-14T18:32:10","date_gmt":"2017-07-14T18:32:10","guid":{"rendered":"https:\/\/blog-stg.cheesecakelabs.com\/?p=5111\/"},"modified":"2022-07-01T17:33:27","modified_gmt":"2022-07-01T17:33:27","slug":"css-architecture-reactjs","status":"publish","type":"post","link":"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/","title":{"rendered":"CSS Architecture with ReactJS"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">We are living a new today, every day, filled with new tools and paradigms. Often, we catch ourselves trying to apply yesterday architectures on new technologies, and that can end bad. 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><br \/>\n<!--more--><br \/>\nBut first things first.<\/p>\n<h2><strong>What is BEM?<\/strong><\/h2>\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. The methodology is based on its name: <\/span><b>B<\/b><span style=\"font-weight: 400;\">lock-<\/span><b>E<\/b><span style=\"font-weight: 400;\">lement-<\/span><b>M<\/b><span style=\"font-weight: 400;\">odifier. This means that your classes will be split between three entities, which one with a different objective and role in your architecture and code organization:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><b>Block: <\/b><span style=\"font-weight: 400;\">Independent logically and functionally components.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Element: <\/b><span style=\"font-weight: 400;\">A part of a block that has no standalone meaning.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Modifier: <\/b><span style=\"font-weight: 400;\">Define the behavior and the appearance of a block or element.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">When talking about selectors with BEM we have three little rules:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Only use CSS classes.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Class\u2019 names can contain numbers and should not contain special characters.<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Individual words are separated by a hyphen.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">BEM entities should look like this:<\/span><span style=\"font-weight: 400;\"><br \/>\n<\/span><\/p>\n<pre><code class=\"language-javascript\">\/* The name of the block, which is also the namespace of its elements and modifiers.*\/\n<b>.block\n<\/b>\n\/* The block namespace followed by a double underscore and the element name. *\/\n<b>.block__element\n<\/b>\n\/* The block or element namespace followed by a double hyphen and the modifier name. *\/\n<b>.block--modifier, .block__element--modifier<\/b>\n<\/code><\/pre>\n<h2><strong>Why should I use it?<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The BEM philosophy was created based on a few premises: code consistency, scalability, reusability, productivity and teamwork. With that 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<p><span style=\"font-weight: 400;\">If you wanna learn more about this methodology, check this article about <\/span><a href=\"https:\/\/blog-stg.cheesecakelabs.com\/css-architecture-first-steps\/\"><span style=\"font-weight: 400;\">CSS Architectures<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<h2><strong>Powering Up<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to naming convention and organization, BEM rocks. It&#8217;s simple and functional. 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 to the recipe: <strong>ITCSS<\/strong>.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">ITCSS is a methodology introduced by Harry Roberts to help creating, managing and scaling large CSS projects. In his own words:<\/span><\/p>\n<blockquote><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><\/blockquote>\n<p><span style=\"font-weight: 400;\">I won\u2019t dig deep on this methodology but I recommend reading <\/span><a href=\"http:\/\/www.creativebloq.com\/web-design\/manage-large-css-projects-itcss-101517528\"><span style=\"font-weight: 400;\">Harry&#8217;s post<\/span><\/a><span style=\"font-weight: 400;\"> to get the concepts behind it. 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<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<ul>\n<li style=\"font-weight: 400;\"><b>Settings: <\/b><span style=\"font-weight: 400;\">Basic configurations and variables.<\/span><\/li>\n<li style=\"font-weight: 400;\"><b>Tools: <\/b><span style=\"font-weight: 400;\">Functions and mixins.<\/span><\/li>\n<li style=\"font-weight: 400;\"><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<li style=\"font-weight: 400;\"><b>Components:<\/b><span style=\"font-weight: 400;\"> UI chunks that compose the interface.<\/span><\/li>\n<li style=\"font-weight: 400;\"><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<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<p><img decoding=\"async\" class=\"aligncenter wp-image-5108 size-full\" 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\" width=\"1950\" height=\"1872\" 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\" \/><\/p>\n<h2><strong>A ReactJS Approach<\/strong><\/h2>\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. 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 and functional components.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So how do we approach our styles and code organization in this new scenario? Keep our style isolated from our React components, using the BEM+ITCSS methodology, or change radically with a <strong>CSS-in-JS<\/strong> approach? I would suggest staying somewhere in between and use the advantages of our previous knowledge.<\/span><\/p>\n<h2><strong>The Think -Adapt- First Approach<\/strong><\/h2>\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. 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 and predictability. Those are all viable premises, so why not keep using it?<\/span><\/p>\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. This is a perfect time to adapt our previous rules to this new context. And here&#8217;s another lib I strongly recommend including to your toolbelt.<\/span><\/p>\n<h2><strong>CSS Modules<\/strong><\/h2>\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\"><span style=\"font-weight: 400;\">Glen Maddern<\/span><\/a><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<pre><code class=\"language-javasscript\">\u2514\u2500\u2500 button\n \u251c\u2500\u2500 index.js\n \u2514\u2500\u2500 styles.css\n<\/code><\/pre>\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<pre><code class=\"language-javascript\">\/*\n* Reset\n*\/\n.button {\n  appearance: none;\n  border: 0;\n  background-color: white;\n  cursor: pointer;\n  color: #333;\n  font-size: .9rem;\n  font-weight: bold;\n}\n.button:focus,\n.button:focus:hover {\n  border-color: #51a7e8;\n  box-shadow: 0 0 5px rgba(81, 167, 232, .5);\n  outline: 0;\n}\n\/*\n* Sizes\n*\/\n.small {\n  padding: .5em 1.4em;\n}\n.medium {\n  padding: .8em 1.4em;\n}\n.large {\n  padding: 1.2em 2.2em;\n}\n\/*\n* Themes\n*\/\n.default {\n  border: 1px solid #ddd;\n  border-radius: 3px;\n  background: linear-gradient(to bottom, #fefefe 0%, #ddd 100%);\n}\n.default:hover {\n  border-color: #bbb;\n  background: #ddd;\n}\n.default:active {\n  border-color: #aaa;\n  background: linear-gradient(to bottom, #bbb 0%, #ddd 44%);\n}\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">And inside of your component you just include the classes you need depending on the its rules. Our button example can be described this way:<\/span><\/p>\n<pre><code class=\"language-javascript\">import PropTypes from 'prop-types'\nimport React from 'react'\nimport styles from '.\/styles.css'\n\nexport const ButtonType = {\n  BUTTON: 'button',\n  RESET: 'reset',\n  SUBMIT: 'submit',\n}\nexport const ButtonTheme = {\n  DEFAULT: 'default',\n  POSITIVE: 'positive',\n  DANGER: 'danger',\n}\nexport const ButtonSize = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n}\n\nconst Button = ({ type, onClick, children, theme, size }) =&gt; {\n  const className = `${styles.button} ${styles[theme]} ${styles[size]}`\n  return (<button type=\"{type}\">{children}<\/button>)\n}\nButton.propTypes = {\n  type: PropTypes.oneOf(Object.keys(ButtonType)),\n  theme: PropTypes.oneOf(Object.keys(ButtonTheme)),\n  size: PropTypes.oneOf(Object.keys(ButtonSize)),\n  onClick: PropTypes.func.isRequired,\n  children: PropTypes.node.isRequired,\n}\nButton.defaultProps = {\n  type: ButtonType.BUTTON,\n  theme: ButtonTheme.DEFAULT,\n  size: ButtonSize.MEDIUM,\n}\nexport default Button\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">Ok. Now we have the solution for the components\u2019 layer. What about global styles, such as settings, normalizes and resets?<\/span><\/p>\n<h2><strong>ITCSS Revival<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The layered folder structure based on ITCSS still fits perfectly in our needs, so why not remain using it?<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The idea is to create the same styles\u2019 folder inside our <code class=\"language-javascript\">src<\/code> project, except the components&#8217; folder, because they are already defined by the React default project layout.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Now, we have something like that:<\/span><\/p>\n<p><img decoding=\"async\" class=\"alignnone size-full wp-image-5109\" 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\" width=\"697\" height=\"553\"><\/p>\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<h2><strong>Again, the Think -Adapt- First<\/strong><\/h2>\n<p><span style=\"font-weight: 400;\">The idea behind this organization is helping 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<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>! Sometimes it\u2019s hard to adapt, because you gotta let it go from things that were hard to master, but don\u2019t forget that the problems you solved may not even exist anymore.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">So, young pilgrims, keeping searching for the knowledge.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><span style=\"font-weight: 400;\"><em>Sources and extra reading material:<\/em><\/span><\/p>\n<p><a href=\"https:\/\/www.xfive.co\/blog\/itcss-scalable-maintainable-css-architecture\/\"><span style=\"font-weight: 400;\">ITCSS &#8211; Scalable Maintainable CSS Architecture<\/span><\/a><br \/>\n<a href=\"http:\/\/www.jamesturneronline.net\/blog\/bemit-naming-convention.html\"><span style=\"font-weight: 400;\">BEMIT Naming Convention<\/span><\/a><br \/>\n<a href=\"http:\/\/www.creativebloq.com\/web-design\/manage-large-css-projects-itcss-101517528\"><span style=\"font-weight: 400;\">ITCSS &#8211; Manage Large CSS Projects<\/span><\/a><br \/>\n<a href=\"http:\/\/getbem.com\/\"><span style=\"font-weight: 400;\">GETBEM<\/span><\/a><br \/>\n<a href=\"https:\/\/medium.com\/nulogy\/how-to-use-css-modules-with-create-react-app-9e44bec2b5c2\"><span style=\"font-weight: 400;\">How To Use CSS Modules With CreateReactApp<\/span><\/a><br \/>\n<a href=\"https:\/\/glenmaddern.com\/articles\/css-modules\"><span style=\"font-weight: 400;\">CSS Modules<\/span><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>We are living a new today, every day, filled with new tools and paradigms. Often, we catch ourselves trying to apply yesterday architectures on new technologies, and that can end bad. One of these cases is BEM \u2013 a CSS naming convention \u2013 which solves a problem that we maybe don&#8217;t have anymore.<\/p>\n","protected":false},"author":65,"featured_media":9172,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[341,471],"tags":[1154],"class_list":["post-5111","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design-br","category-engenharia","tag-tag-reactjs-br"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>CSS Architecture with ReactJS | Cheesecake Labs<\/title>\n<meta name=\"description\" content=\"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.\" \/>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Architecture with ReactJS | Cheesecake Labs\" \/>\n<meta property=\"og:description\" content=\"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog-stg.cheesecakelabs.com\/br\/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=\"2022-07-01T17:33:27+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=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/\",\"name\":\"CSS Architecture with ReactJS | Cheesecake Labs\",\"isPartOf\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\"},\"datePublished\":\"2017-07-14T18:32:10+00:00\",\"dateModified\":\"2022-07-01T17:33:27+00:00\",\"author\":{\"@type\":\"person\",\"name\":\"Douglas Gimli\"},\"description\":\"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.\",\"breadcrumb\":{\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS Architecture with ReactJS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website\",\"url\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/\",\"name\":\"Cheesecake Labs\",\"description\":\"Empresa de desenvolvimento e design de aplicativos mobile &amp; web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"name\":\"Douglas Gimli\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglasglimi-300x300.jpg\",\"contentUrl\":\"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglasglimi-300x300.jpg\",\"caption\":\"Douglas Gimli\"},\"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:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/douglas-gimli\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS Architecture with ReactJS | Cheesecake Labs","description":"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"pt_BR","og_type":"article","og_title":"CSS Architecture with ReactJS | Cheesecake Labs","og_description":"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.","og_url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/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":"2022-07-01T17:33:27+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":{"Escrito por":null,"Est. tempo de leitura":"7 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/","name":"CSS Architecture with ReactJS | Cheesecake Labs","isPartOf":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website"},"datePublished":"2017-07-14T18:32:10+00:00","dateModified":"2022-07-01T17:33:27+00:00","author":{"@type":"person","name":"Douglas Gimli"},"description":"The idea behind this organization is helping you create better ReactJS projects by structuring and scaling your CSS architecture.","breadcrumb":{"@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/css-architecture-reactjs\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/blog-stg.cheesecakelabs.com\/br\/"},{"@type":"ListItem","position":2,"name":"CSS Architecture with ReactJS"}]},{"@type":"WebSite","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#website","url":"https:\/\/blog-stg.cheesecakelabs.com\/br\/","name":"Cheesecake Labs","description":"Empresa de desenvolvimento e design de aplicativos mobile &amp; web que est\u00e1 reinventando o desenvolvimento de produtos com times remotos. N\u00f3s desenvolvemos aplicativos iOS, Android e aplica\u00e7\u00f5es Web com as melhores empresas dos EUA, do Brasil e do mundo.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog-stg.cheesecakelabs.com\/br\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"pt-BR"},{"@type":"Person","name":"Douglas Gimli","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/blog-stg.cheesecakelabs.com\/br\/#\/schema\/person\/image\/","url":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglasglimi-300x300.jpg","contentUrl":"https:\/\/ckl-website-static.s3.amazonaws.com\/wp-content\/uploads\/2017\/06\/douglasglimi-300x300.jpg","caption":"Douglas Gimli"},"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:\/\/blog-stg.cheesecakelabs.com\/br\/\/autor\/douglas-gimli\/"}]}},"_links":{"self":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5111","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/users\/65"}],"replies":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/comments?post=5111"}],"version-history":[{"count":1,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5111\/revisions"}],"predecessor-version":[{"id":10280,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/posts\/5111\/revisions\/10280"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media\/9172"}],"wp:attachment":[{"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/media?parent=5111"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/categories?post=5111"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog-stg.cheesecakelabs.com\/br\/wp-json\/wp\/v2\/tags?post=5111"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}