CSS Naming Conventions & Methodologies
Master CSS naming conventions and methodologies that keep stylesheets maintainable as projects scale from hundreds to thousands of selectors.
Why CSS Architecture Matters
CSS is easy to write but hard to maintain at scale. Without architecture, you end up with specificity wars (!important everywhere), dead CSS (unused rules nobody dares delete), side effects (changing one class breaks unrelated pages), and bloated file sizes. The average enterprise website has 50-80% unused CSS. CSS architecture solves this by establishing conventions for naming (how you name classes), organization (how you structure files), scope (how you prevent leaks), and composition (how you combine styles). A well-architected CSS codebase lets any developer modify styles confidently, knowing their change won't break other pages.
BEM (Block Element Modifier)
- Block: Standalone component — .card, .nav, .modal. Meaningful name describing the component's purpose, not its appearance
- Element: Part of a block — .card__title, .card__image, .card__body. Connected to its block with double underscore. Can't exist independently
- Modifier: Variation of block/element — .card--featured, .card__title--large. Connected with double hyphen. Changes appearance or behavior
- Benefits: Flat specificity (single class selectors only), self-documenting (class name tells you what it is and where it belongs), zero side effects (styles scoped to component)
- Common Mistakes: Nesting too deep (.card__body__text__link — max 2 levels), using BEM for layout (BEM is for components, use utility classes for layout), mixing BEM with IDs
- BEM with Sass: .card { &__title { ... } &__body { ... } &--featured { ... } } — Sass nesting generates BEM classes. Clean authoring, flat output