How to Organize CSS Around Your HTML
Keep selectors shallow, components readable, and design tokens explicit so a page remains easy to revise after launch.
The short version
CSS stays maintainable when the markup exposes stable component boundaries.
Start with tokens and a small base
Define recurring colors, spacing, radii, and type choices once. Keep the base layer focused on document defaults. A token should represent a real design decision, not merely rename a single value.
:root {
--paper: #fafaf7;
--ink: #151513;
--mark: #f0dc55;
--space-3: 0.75rem;
--radius: 0.5rem;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
}Prefer component classes to clever selectors
A class such as .article-card describes a durable boundary. A selector that depends on the fifth div inside a particular section breaks as soon as the HTML changes. Keep specificity low and states explicit.
- Use classes for components and variants.
- Avoid ids for styling.
- Keep nesting shallow.
- Co-locate responsive rules with the component when practical.
- Delete selectors when their markup disappears.
Make editing safe
Imported or collaborative HTML changes over time. Styles that target semantic elements and stable classes survive region edits better than styles tied to exact child positions. Test the page with longer headings, empty states, and unexpected lists before calling the stylesheet finished.