CSS Architecture

CSS selectors are matched against the entire document regardless of which file they were written in, so one .title rule styles every element with that class. Collisions are silent, and unrelated components end up restyling each other.

A single class keeps every rule at the same low weight, so a later rule can override it by source order alone. IDs and long descendant chains raise the weight, forcing every future override to be heavier still.

Utility-first composes many single-purpose classes in the markup, each setting one or two declarations. The semantic approach puts one meaning-based class on the element and defines all its styling in the stylesheet. The trade is markup noise versus an ever-growing stylesheet.

Global CSS holds what must exist exactly once for the whole document: the reset, @font-face declarations, custom-property definitions on :root, base element typography, and a small utility set. Anything describing one component belongs in that component's file.

Nothing in CSS lowers an existing rule's weight, so the cheapest way to override is always to write something heavier, and the floor keeps rising until it hits !important. The fix is authoring every rule at the same low weight and deciding conflicts by a defined order instead.

A reset strips browser defaults — margins, list markers, heading sizes — down to a flat baseline. A normalize stylesheet keeps useful defaults and only patches cross-browser inconsistencies. Either one loads first, before base and component rules.

BEM has only two levels: a block and a flat set of elements it owns. Element names describe ownership, not DOM depth, so the class stays card__title however deep the node sits. If a part needs its own parts, promote it to a block.

A modifier rule holds only the difference from the base, so the base class must stay on the node to supply the shared styles. Both are single-class selectors of equal specificity, so the modifier must come later in the stylesheet to win.

OOCSS, from Nicole Sullivan, says to split a component's box mechanics (structure) from its paint (skin) so a new variant costs one small rule, and to style objects by their own class rather than by where they sit, so the same class works anywhere.

CSS @import rules must appear before any style rule — only @charset and @layer statements may precede them — and a misplaced one is silently ignored. At runtime each import is discovered only after its parent sheet is parsed, so requests serialize; a build step inlines them instead.

The to (...) selector marks a lower boundary: rules inside the @scope block match the scope root and its descendants, but stop at any element matching the limit, that element included. The styled region is a subtree with a hole, hence donut.

A closed utility vocabulary makes off-scale values inexpressible, so consistency is enforced by the system rather than by review discipline. The cost is friction whenever a legitimate design genuinely needs a value the scale does not contain.

Utility CSS scales with the number of distinct utilities used, so it plateaus as a codebase grows. Component-class CSS scales with the number of components, so it grows roughly linearly and rarely shrinks. Utility-first shifts the cost from the stylesheet into markup bytes.

BEM's costs are verbose markup, long repetitive names, and rename churn across templates, stylesheets, tests and scripts. Its bigger weakness is that nothing enforces it: one descendant selector reintroduces the coupling it removed. It stops paying when discipline cannot be sustained or tooling already guarantees scoping.

Nothing in CSS errors on a selector that matches nothing, so deletion is evidence-gathering, not compilation. Coverage tools report only what a recorded session exercised, and purge tools match class-name strings in source, so states, breakpoints and dynamically built class names all look dead when they are not.

Do not lower the old rules first. Contain them — move the legacy stylesheet into a low cascade layer, or neutralise chains with :where() — so new flat rules win without escalating, then migrate component by component behind visual checks.

Ship defaults at zero or near-zero cascade weight: wrap the library's selectors in :where() so they contribute nothing to specificity, or publish the library inside a low cascade layer. Either way a consumer's plain class wins without escalating.

A shared class is a global name with an unknown set of users, so editing it has unbounded blast radius. Utility classes on one element affect only that element. Over years, unbounded blast radius makes engineers add rules instead of changing them, and stylesheets become append-only.

Extract when the repetitions must change together — the repeated string represents one concept, not a coincidence. Prefer extracting the markup into a reusable template or component so the class string exists once; extracting a CSS class instead reintroduces the shared-rule blast radius.

Stylesheets grow because adding a rule is always cheaper than understanding the existing ones, and nothing ever fails when a rule goes unused. The fixes are structural: colocate CSS with what it styles, keep the global layer a closed set with an owner, allow raw values only in the token file, and enforce it in CI rather than in review.

Hashing guarantees your class names cannot collide with anyone else's. @scope guarantees your rules only match inside a chosen subtree. Only shadow DOM guarantees outside selectors cannot reach in — and none of them stop inherited properties from crossing.

Publish an explicit override mechanism — a declared cascade-layer order with a layer reserved for product code, zero-weight defaults, and custom properties for values meant to be configured — and enforce it with linting. Left implicit, teams discover it by escalating selectors, and the escalation is permanent.

Decide on the codebase's shape, not taste: utility-first pays off only where a componentized markup layer already collapses duplication. If both are allowed, split by responsibility — utilities compose inside components, hand-written CSS owns base layers, structural features and third-party overrides — and enforce the boundary explicitly.

SMACSS sorts rules into Base, Layout, Module, State and Theme, prefixing layout with l- and states with is- or has-. Namespace prefixes generalise the idea: c- marks a component, o- an abstract object, u- a utility, so the prefix advertises how risky a class is to edit.

Inside an @scope block, :scope matches the scope root element itself. Bare selectors are implicitly prefixed with :scope and a descendant combinator, so img means :scope img and can never match the root — only elements beneath it.

Scope proximity is a cascade tiebreaker for declarations coming from @scope blocks: the one whose scoping root is fewer generational hops from the matched element wins. It is consulted after specificity and before order of appearance.