{"id":275317,"date":"2018-08-15T12:19:55","date_gmt":"2018-08-15T19:19:55","guid":{"rendered":"http:\/\/css-tricks.com\/?p=275317"},"modified":"2018-08-15T12:19:55","modified_gmt":"2018-08-15T19:19:55","slug":"creating-the-perfect-css-system","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/creating-the-perfect-css-system\/","title":{"rendered":"Creating the \u201cPerfect\u201d CSS System"},"content":{"rendered":"<p>My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project:<\/p>\n<blockquote><p> Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML conventions from the start. Meet early and often to discuss every library, framework, mental model, and gem you are interested in using and take feedback seriously. Simply put, if they absolutely hate BEM and refuse to write it, don\u2019t use BEM. You can explore working around this with linters, but forcing people to use a naming convention they hate isn\u2019t going to make your job any easier. Hopefully, you will be able to convince them why the extra underscores are useful, but finding a middle ground where everyone will participate in some type of system is the priority.\n<\/p><\/blockquote>\n<p>I totally agree and the important point I noted here is that all of this work is a collaborative process and compromise is vital when making a system of styles that are scalable and cohesive. In my experience, at least, it\u2019s real easy to walk into a room with all the rules written down and new guidelines ready to be enforced, but that never works out in the end.<\/p>\n<p>Ethan Marcotte riffed on Lindsay\u2019s post in an article called <a href=\"https:\/\/ethanmarcotte.com\/wrote\/weft\/\" rel=\"noopener\">Weft<\/a> and described why that\u2019s not always a successful approach: <\/p>\n<blockquote><p>Broad strokes here, but I feel our industry tends to invert Lindsay\u2019s model: we often start by identifying a technical solution to a problem, before understanding its broader context. Put another way, I think we often focus on designing or building an element, without researching the other elements it should connect to\u2014without understanding the system it lives in. <\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>My pal Lindsay Grizzard wrote about creating a CSS system that works across an organization and all of the things to keep in mind when starting a new project: Getting other developers and designers to use the standardized rules is essential. When starting a project, get developers onboard with your CSS, JS and even HTML [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":275331,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Creating the \u201cPerfect\u201d CSS System","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1396],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/css-system.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":198754,"url":"https:\/\/css-tricks.com\/bem-101\/","url_meta":{"origin":275317,"position":0},"title":"BEM 101","date":"April 2, 2015","format":false,"excerpt":"The following is a collaborative post by guest Joe Richardson, Robin Rendle, and a bunch of the CSS-Tricks staff. Joe wanted to do a post about BEM, which we loved, and just about everybody around here had thoughts and opinions about BEM, so we figured we'd all get together on\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":326169,"url":"https:\/\/css-tricks.com\/tailwind-versus-bem\/","url_meta":{"origin":275317,"position":1},"title":"Tailwind versus BEM","date":"November 25, 2020","format":false,"excerpt":"Some really refreshing technological comparison writing from Eric Bailey. Like, ya know, everything in life, we don't have to hate or love everything. Baby bear thinking, I like to say. There are benefits and drawbacks. Every single bullet point here is well-considered and valid. I really like the first in\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312208,"url":"https:\/\/css-tricks.com\/behind-the-source-cassie-evans\/","url_meta":{"origin":275317,"position":2},"title":"Behind the Source: Cassie Evans","date":"June 2, 2020","format":false,"excerpt":"I feel like the tech industry takes itself far too seriously sometimes. I get frustrated by all the posturing and gatekeeping - \u201cYou\u2019re not a real developer unless you use x framework\u201d, \u201cCSS isn\u2019t a real programming language\u201d.I think this kind of rhetoric often puts new developers off, and the\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/green-circles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306134,"url":"https:\/\/css-tricks.com\/building-a-scalable-css-architecture-with-bem-and-utility-classes\/","url_meta":{"origin":275317,"position":3},"title":"Building a Scalable CSS Architecture With BEM and Utility Classes","date":"April 21, 2020","format":false,"excerpt":"Maintaining a large-scale CSS project is hard. Over the years, we've witnessed different approaches aimed at easing the process of writing scalable CSS. In the end, we all try to meet the following two goals: Efficiency: we want to reduce the time spent thinking about how things should be done\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/website-sketch.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320189,"url":"https:\/\/css-tricks.com\/state-of-jamstack-2020-data-deep-dive\/","url_meta":{"origin":275317,"position":4},"title":"State of Jamstack 2020: Data Deep Dive","date":"September 3, 2020","format":false,"excerpt":"The Jamstack, a modern approach to building websites and apps, delivers better performance, higher security, lower cost of scaling, and a better developer experience. But how popular is it among developers worldwide, and what do they love and hate about it? We at Kentico Kontent decided to take a closer\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/jamstack-data-deep-dive-1200x600-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351586,"url":"https:\/\/css-tricks.com\/static-site-generators-vs-cms-powered-websites-how-to-keep-marketers-and-devs-happy\/","url_meta":{"origin":275317,"position":5},"title":"Static Site Generators vs. CMS-powered Websites: How to Keep Marketers and Devs Happy","date":"September 16, 2021","format":false,"excerpt":"Many developers love working with static site generators like Gatsby and Hugo. These powerful yet flexible systems help create beautiful websites using familiar tools like Markdown and React. Nearly every popular modern programming language has at least one actively developed, fully-featured static site generator. Static site generators boast a number\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Developer-Header.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/08\/css-system.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275317"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=275317"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275317\/revisions"}],"predecessor-version":[{"id":275330,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/275317\/revisions\/275330"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/275331"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=275317"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=275317"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=275317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}