CSS Architecture
CSS architecture refers to systematic approaches to organising stylesheets so they remain readable, maintainable, and scalable as a project grows. Without architecture, CSS tends toward specificity conflicts, side effects (one rule unexpectedly changing another component), and dead code (styles that are never deleted). The Natours project demonstrates the 7-1 pattern with bem-methodology naming.
The 7-1 Pattern
The 7-1 pattern structures sass-scss partials into 7 thematic folders compiled into a single main.scss entry file. Used in Natours:
| Folder | Contents | Outputs CSS? |
|---|---|---|
abstracts/ | Variables, functions, mixins | No — helpers only |
base/ | Resets, root rules, typography, utilities | Yes |
components/ | Self-contained UI blocks (card, button, form…) | Yes |
layout/ | Page-level regions (header, footer, grid, nav) | Yes |
pages/ | Page-specific overrides | Yes |
themes/ | (Optional) Dark/light mode overrides | Yes |
vendors/ | (Optional) Third-party CSS | Yes |
main.scss imports them in order: abstracts first (no output), then base → components → layout → pages. This import order matters because later rules can override earlier ones.
Why This Works
- Abstracts first — variables and mixins are available everywhere that follows.
- Base before components — global resets don’t accidentally override component styles.
- Components before layout — layout may contain or modify components, not the reverse.
- Pages last — page-specific rules have the highest opportunity to override without
!important.
BEM Pairing
The 7-1 pattern organises files; bem-methodology organises class names. Together they make it clear at a glance both where a style lives (which partial file) and what it belongs to (which block/element/modifier). In Natours:
components/_card.scss → .card, .card__side, .card__side--front
layout/_navigation.scss → .navigation, .navigation__nav, .navigation__item
Cascade Management
Good architecture minimises the need to fight specificity. Techniques used in Natours:
- Flat selectors — almost every rule uses a single class, no deep descendant chains.
- Utility classes —
_utilities.scssprovides single-purpose helpers (u-center-text,u-margin-bottom-big) to avoid inline styles and one-off rules. - No
!important— specificity is controlled structurally, not patched.
Alternative Architectures (not in these repos)
| Approach | Key idea |
|---|---|
| SMACSS | Categories: Base, Layout, Module, State, Theme |
| ITCSS | Inverted triangle — broadest rules first, most specific last |
| Atomic CSS / Tailwind | Tiny utility classes; no semantic block names |
| CSS Modules | Locally scoped class names at the bundler level (used in React ecosystems) |
| CSS-in-JS | Styles as JavaScript objects, scoped to components (alternative to sass-scss in react apps) |
See Also
- sass-scss — the preprocessor that makes 7-1 practical
- bem-methodology — naming convention that pairs with this structure
- responsive-design — breakpoint mixins live in
abstracts/ - schmedtmann-2018-natours-advanced-css — source repo demonstrating 7-1 in full