{"id":374586,"date":"2022-10-31T11:39:55","date_gmt":"2022-10-31T18:39:55","guid":{"rendered":"https:\/\/css-tricks.com\/?post_type=newsletters&p=374586"},"modified":"2022-10-31T11:39:56","modified_gmt":"2022-10-31T18:39:56","slug":"299-toe-dipping-into-cascade-layers","status":"publish","type":"newsletters","link":"https:\/\/css-tricks.com\/newsletter\/299-toe-dipping-into-cascade-layers\/","title":{"rendered":"299: Toe-Dipping Into Cascade Layers"},"content":{"rendered":"\n
[Geoff:]<\/strong> I’ve developed a habit on CodePen where I start structing my CSS in cascade layers. Because I demo a lot of stuff, I often want the most relevant styles at the very top of the CSS. I\u2019ve usually done that by creating commented sections of “demo styles” and “base styles”.<\/p>\n\n\n\n There’s nothing inherently wrong with that, at least in a demo sorta evironment. But doing that in production will likely back you into a corner of the Cascade. Layers allow me to keep this organization, but manage specificity so that the base styles are prioritized over the demo styles:<\/p>\n\n\n\n What I like about this is that the Cascade layers can are useful for many other things! Less intrusive resets! Organizing complex CSS architecture! Overriding styles from third-party tools and frameworks! Designing your own framework! All of which Miriam Suzanne covers in extensive detail in our Complete Guide to CSS Cascade Layers<\/a>.<\/p>\n\n\n\n Great feature, right? Speaking of new CSS features\u2026<\/p>\n\n\n\n\/* Demo styles *\/\n.example {\n \/* demo-specific styles for the element *\/\n}\n\n\/* Base styles *\/\n.example {\n \/* base styles for the element *\/\n}<\/code><\/pre>\n\n\n\n
@layer base, demo;\n\n@layer demo {\n .example {\n \/* demo-specific styles for element *\/\n }\n}\n\n@layer base { \n .example {\n \/* base styles for the element *\/\n }\n}<\/code><\/pre>\n\n\n\n
@layer<\/code> syntax is self-documenting. No need to distinguish the styles with comments because the layers already do it. But the real power is the fact that my measley little
.example<\/code> class wrapper in the
base<\/code> layer now carries more specificity than the same class, ID, or whatever selector is in the
demo<\/code> layer. That makes a typical demo both a lot easier to understand because the styles are logically organized, and solid as far as preventing weird styling conflicts that would otherwise clutter up the CSS I want to demo and display at the top of the code.<\/p>\n\n\n\n
\n\n\n\n