{"id":247257,"date":"2016-10-31T16:35:15","date_gmt":"2016-10-31T23:35:15","guid":{"rendered":"http:\/\/css-tricks.com\/?p=247257"},"modified":"2016-10-31T16:35:15","modified_gmt":"2016-10-31T23:35:15","slug":"8-simple-rules-robust-scalable-css-architecture","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/8-simple-rules-robust-scalable-css-architecture\/","title":{"rendered":"8 simple rules for a robust, scalable CSS architecture"},"content":{"rendered":"

I don’t disagree on any particular point on this thesis by Jarno Rantanen.<\/p>\n

This is the first I’ve seen this particular naming convention, which seems fine to me, but I’d add that any well-considering naming convention works.<\/p>\n

Also, there is this:<\/p>\n

Cascading styles will ruin your day, eventually.<\/p><\/blockquote>\n

A sentiment shared by many these days, and the likely culprit for all the peter-griffin-adjusting-the-blinds.gifs out there in the world. Again I don’t entirely disagree, but, there are styles I gotta imagine even hardened CSS module aficionados would allow to cascade. For instance: why wouldn’t I let the body copy font-family<\/code> cascade?<\/p>\n","protected":false},"excerpt":{"rendered":"

I don’t disagree on any particular point on this thesis by Jarno Rantanen. This is the first I’ve seen this particular naming convention, which seems fine to me, but I’d add that any well-considering naming convention works. Also, there is this: Cascading styles will ruin your day, eventually. A sentiment shared by many these days, […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[17],"tags":[895,896],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":264665,"url":"https:\/\/css-tricks.com\/latest-ways-deal-cascade-inheritance-specificity\/","url_meta":{"origin":247257,"position":0},"title":"The latest ways to deal with the cascade, inheritance and specificity","date":"January 10, 2018","format":false,"excerpt":"The cascade is such an intrinsic part of CSS that they put it right there in the name. If you\u2019ve ever needed to use !important to affect specificity in the cascade, you\u2019ll know that it can be a tricky thing to deal with. In the early days of CSS, it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":255971,"url":"https:\/\/css-tricks.com\/naming-things-is-only-getting-harder\/","url_meta":{"origin":247257,"position":1},"title":"Naming Things is Only Getting Harder","date":"June 21, 2017","format":false,"excerpt":"I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment. They're not overly complicated. They are shorthand properties for expressing where an element should start and end on a grid's defined columns and rows. What caught me was the fact that\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":359886,"url":"https:\/\/css-tricks.com\/dont-fight-the-cascade-control-it\/","url_meta":{"origin":247257,"position":2},"title":"Don’t Fight the Cascade, Control It!","date":"January 10, 2022","format":false,"excerpt":"If you\u2019re disciplined and make use of the inheritance that the CSS cascade provides, you\u2019ll end up writing less CSS. But because our styles often comes from all kinds of sources \u2014 and can be a pain to structure and maintain\u2014the cascade can be a source of frustration, and the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/stephen-leonardi-LfDwhVBfqEk-unsplash-scaled.jpg?fit=1200%2C796&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":266529,"url":"https:\/\/css-tricks.com\/css-basics-second-s-css\/","url_meta":{"origin":247257,"position":3},"title":"CSS Basics: The Second “S” in CSS","date":"February 14, 2018","format":false,"excerpt":"CSS is an abbreviation for Cascading Style Sheets. While most of the discussion about CSS on the web (or even here on CSS-Tricks) is centered around writing styles and how the cascade affects them, what we don't talk a whole lot about is the sheet part of the language. So\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/02\/sheet-cascade-2.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":278596,"url":"https:\/\/css-tricks.com\/the-c-in-css-the-cascade\/","url_meta":{"origin":247257,"position":4},"title":"The “C” in CSS: The Cascade","date":"November 13, 2018","format":false,"excerpt":"Following up from Geoff\u2019s intro article on The Second \"S\" in CSS, let\u2019s now move the spotlight to the \"C\" in CSS \u2014 what we call the Cascade. It\u2019s where things start to get messy, and even confusing at times. Have you ever written a CSS property and the value\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/cascade-bubbles.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":363766,"url":"https:\/\/css-tricks.com\/css-cascade-layers\/","url_meta":{"origin":247257,"position":5},"title":"A Complete Guide to CSS Cascade Layers","date":"February 21, 2022","format":false,"excerpt":"This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity, so that we have full control over which styles take priority in a project without relying on specificity hacks or !important. This guide is intended to help you\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/02\/cascade-layers-guide.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247257"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=247257"}],"version-history":[{"count":2,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247257\/revisions"}],"predecessor-version":[{"id":247260,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/247257\/revisions\/247260"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=247257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=247257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=247257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}