![\"Stack](\"/images/journal-inline-css-cascade-layers.webp\")
\n Framework docs talk about components; the browser still applies origin, importance, specificity, and order. I teach that stack to every senior hire because debugging production CSS without it is guesswork. User agent styles sit at the bottom. Author styles win by default unless !important or inline styles enter the chat.
\n\nInheritance is the feature everyone forgets until color on body was supposed to flow to a modal portal rendered outside the tree. I set typography and color tokens on :root and let inheritance do the heavy lifting instead of re-declaring font-family on forty selectors.
\n\nAuthor stylesheets imported in wrong order are the silent killer when vendors ship CSS after yours. I document import order in the entry file comment block and enforce it in review the same way we enforce import order for side-effectful modules.
\n\n/* layer order: reset, tokens, components, utilities */\n@layer reset, tokens, components, utilities;\n\n@layer components {\n .card { padding: 1rem; }\n}\n
The moment you write div.nav ul li a you have bought a maintenance mortgage. I cap selectors at a single class or one element plus class. IDs are for fragment targets and skip links, not styling hooks. When a rule needs !important, I treat that as a failed design token, not a victory.
\n\nTailwind and CSS modules help because they keep specificity flat by construction. Vanilla projects need the same discipline manually: BEM naming without the three-level chains, or a single data-attribute hook per component block.
\n\nThe :where() pseudo-class is underrated for zero-specificity resets. I use :where(h1, h2, h3) { margin: 0 } then layer component margins intentionally. That pattern prevents reset wars with user content in CMS bodies.
\n\nCascade layers let me declare reset, tokens, components, and utilities in a fixed order without fighting source order across ten imported files. I put @layer base before @layer components before @layer utilities in one entry stylesheet. Overrides stay predictable when marketing injects a promo banner stylesheet late.
\n\nNot every browser target needs layers yet; for public marketing sites on evergreen browsers they are worth it. For legacy intranets I fall back to strict import order and documented comment blocks. The goal is the same: nobody ships a 2-0-0 rule to beat a 1-2-1 rule.
\n\nTeams migrating from Bootstrap often leave .row .col-* chains in legacy pages. I quarantine legacy CSS behind a .legacy-layout wrapper with higher layer isolation instead of letting old selectors beat new tokens globally.
\n\nWhen two themes need the same selector with different values, variables beat duplication. I define --surface, --text, --accent on :root and swap a data-theme attribute on html. Specificity stays at one class while palettes change. That pattern powers journal headers here without per-post stylesheets.
\n\nVariables inherit and cascade like any property, which means portals and shadow DOM hosts need explicit redefinition. I document which tokens are global and which are component-local so contractors do not set --accent on a card and wonder why the footer turned orange.
\n\nDark mode toggles implemented as body.classList.add(dark) plus hundreds of overrides are a maintenance trap. Variables on html[data-theme] keep specificity flat while palettes swap.
\n\nChrome Styles panel shows cascaded values and struck-through losers. I step through computed styles when a flex gap refuses to apply because a min-width:auto child is blowing the row. The fix is usually display and min-width, not another !important font-size rule.
\n\nI keep a short team doc: no ID selectors for layout, no inline styles except dynamic transforms, layers listed in README. Code review catches most wars before they merge.
\n\nI teach juniors to read computed styles before adding another class. Half of cascade bugs are display flex missing on the parent, not missing !important on the child.
\n\nRuntime styled components reintroduce specificity through generated class hashes and style injection order. Global cascade discipline plus tokens often beats that overhead on content sites. I reach for CSS-in-JS when style isolation per component truly matters, not when I am lazy about naming.
\n\nThis site is vanilla CSS files loaded once. Journal and marketing share tokens; components do not fight because specificity never escalated.
\n\nPerformance audits sometimes flag expensive selectors. Deeply nested :nth-child chains on huge lists get flattened to class on the row. Specificity and selector cost are related problems.
\n\nIf your stylesheet feels brittle, audit top twenty selectors by specificity weight. Delete half the IDs, collapse descendant chains, introduce layers or import order, and move variation into custom properties. The cascade is not your enemy; ambiguous ownership is.
\n\nI help teams rewrite the top three templates, not the entire repo. Flat CSS is a habit you can adopt on the next sprint without rebranding.
\n\nWhen two agencies share one WordPress theme, I split tokens.css they both import and ban inline style attributes in the editor. Shared tokens beat shared spaghetti. For a related angle I keep coming back to, see CSS Custom Properties as Design Tokens That Survive Redesigns.
","tags":["css","cascade","architecture"],"views":146}