Core ideas worth applying immediately
These are practical architecture principles, not theory for theory's sake.
Think in layers, not in patches
If every fix competes through specificity, the project becomes fragile. Review the cascade first, then use `@layer` to make priority explicit.
BEM as a contract
BEM forces intent into naming: block, element and modifier. That makes selectors more readable and avoids brittle chains such as `.sidebar ul li a.active`.
CSS Modules for isolation
In component-driven projects, CSS Modules reduce class collisions and make it easier to delete dead code with confidence.
Utility-first with discipline
Tailwind can speed up implementation, but it still needs semantic component boundaries and class-composition rules if you want it to stay maintainable.
Specificity is the real enemy
A strong architecture keeps specificity predictable so components can be extended without hacks, selector inflation or `!important` abuse.
Folder structure should age well
Separating base, layout, components, utilities and themes makes future maintenance much easier once the codebase grows beyond a few hundred lines.
Review CSS before merge, not after damage
A lightweight CSS review checklist catches mobile breakage, duplicated patterns, token drift and accessibility regressions early.
Consistency beats personal preference
Document the team standard and optimize for shared predictability, not individual style wars in pull requests.
