Why Organization Matters
Small projects can get away with messy CSS, but as a codebase grows, unclear naming and unpredictable specificity turn every change into a risk of breaking something else. A few conventions go a long way.
Naming with BEM
BEM (Block, Element, Modifier) is a popular naming convention that keeps class names descriptive and flat, avoiding deep selector nesting and specificity conflicts.
BEM Naming Example
<style>
.card { border: 1px solid #ddd; border-radius: 8px; padding: 16px; }
.card__title { font-size: 18px; font-weight: bold; }
.card__body { color: #555; }
.card--featured { border-color: steelblue; background: #eef4fb; }
</style>
<div class="card card--featured">
<div class="card__title">Featured Card</div>
<div class="card__body">Block, Element, Modifier naming in action.</div>
</div>BEM Parts
| Part | Syntax | Meaning |
|---|---|---|
| Block | .card | A standalone, reusable component |
| Element | .card__title | A part that belongs to the block |
| Modifier | .card--featured | A variation of the block or element |
General Guidelines
- Keep selectors flat and low-specificity — avoid deep nesting and IDs for styling.
- Group related styles together and order them consistently across files.
- Define shared values (colors, spacing, font sizes) once as CSS variables.
- Prefer Flexbox/Grid over floats or absolute positioning for layout.
- Avoid !important except as a rare, deliberate last resort.
- Write mobile-first, adding complexity with min-width media queries.
A Simple Reset
Most projects start with a small reset to remove inconsistent browser defaults, creating a predictable baseline to build on.
A Minimal CSS Reset
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img, picture, video {
max-width: 100%;
display: block;
}
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}Organizing Files as Projects Grow
Splitting one giant stylesheet into smaller files by responsibility — variables, resets, layout, components — keeps large projects navigable, whether using plain CSS with @import, Sass partials, or CSS Modules.
Watch for Unused CSS
As projects evolve, old selectors are often left behind after markup changes. Periodically audit for unused CSS using browser DevTools coverage tools to keep stylesheets lean.
Best Practice
Pick one naming convention (BEM or similar) and one organizational structure early, document it briefly, and apply it consistently — consistency matters more than which specific convention you choose.
Summary
Great CSS isn’t about clever tricks — it’s about consistency, low specificity, and clear naming that lets any developer predict what a class does without hunting through the whole stylesheet.