Stop 03 · CSS3Topics · 16/17

CSS Architecture

In short

Your first project's CSS is 200 lines and fine. By the fifth project it's 3,000 lines, and changing one button breaks the footer. CSS architecture is how you stop that mess.

Strategies (component-based CSS, utility-first, ITCSS, etc.) for organizing stylesheets so they stay maintainable as a codebase grows. A useful architecture balances reuse, isolation, readability, team conventions, build tooling, and the cost of changing styles as the application grows.

The jaadu mascot in a tidy mess kitchen places a jar on the spice shelf beside a separate vegetable corner and dish rack.

Think of it like this

Organising the hostel mess kitchen

A good mess kitchen has the masala shelf, the veggie corner and the dish area, each in its place. Nobody keeps salt in the dish rack. CSS architecture is the same idea: base styles, layouts, components and utilities, each in its own spot.

Watch it happen

Cascade layers, stacked

push(reset)

reset

Top of the stack is coloured

1/5First layer: the reset. Lowest priority.

The big ideas

What you need to know

Layer your styles

Go from general to specific: reset and base, then layout, then components, then small utilities.

Think in components

Style a .card or .btn as a reusable block, not 'the third box on the homepage'.

Keep specificity low

Single-class selectors are easy to override. Deep nesting and IDs create specificity wars.

@layer sets the order

Cascade layers let you say which group of styles wins, regardless of how specific each selector is.

See it in code

Walk through the code

css

1@layer reset, base, layout, components, utilities;2 3@layer reset {4  *, *::before, *::after { box-sizing: border-box; margin: 0; }5}6@layer base {7  body { font-family: system-ui, sans-serif; line-height: 1.6; }8}9@layer components {10  .btn { padding: 0.6rem 1.2rem; border-radius: 8px; }11  .card { padding: 1rem; border: 1px solid #eee; }12}13@layer utilities {14  .mt-0 { margin-top: 0; }15}

1/4This one line fixes the order of layers. Later names have higher priority.

Later layers win over earlier ones. So .mt-0 in utilities beats any margin in components, even if that selector is more specific.

Save yourself the pain

Common mistakes

Oops

One giant style.css where new rules are just added at the bottom.

Do this instead

Split by purpose (base, layout, components) or use @layer to keep order clear.

Oops

Selectors that depend on page position, like .home .section:nth-child(3) .box.

Do this instead

Give the box a meaningful class like .pricing-card and style that.

Your mission

Refactor your messiest CSS

~40 min

Quick check

With @layer base, components, utilities; which layer's styles win if they clash?

Go deeper

1Compare how a component-based structure differs from one giant stylesheet. Write down when you would choose each option and what trade-off drives that choice.
2Read about the '7-1 pattern' or ITCSS for organizing large CSS codebases. Then apply the idea in a small example so the theory becomes practical.
3Notice how utility-first (Tailwind) trades off against component-scoped CSS.