CSS Architecture & Methodologies — HTML & CSS Course

What you'll learn

Writing CSS that works is one skill; writing CSS that stays maintainable across thousands of lines is another. Welcome to Phase 6. This module is about architecture — the naming conventions and strategies that keep large stylesheets sane.

By the end you'll be able to:

Explain why CSS becomes unmaintainable at scale
Apply the BEM naming convention
Understand the utility-first approach
Use design tokens and CSS resets

Why CSS gets messy

CSS is global by default — every rule can affect every element — so as a project grows, styles start colliding. Symptoms include ever-climbing specificity, !importantcreeping in, class names like .box2-final-real, and the terror of deleting any rule in case something breaks. Methodologies exist to impose order on that global chaos.

BEM naming

BEM — Block, Element, Modifier — is the most popular naming convention. A Block is a component (.card), an Element is a part of it (.card__title, with a double underscore), and a Modifier is a variant (.card--featured, with a double dash). The names are verbose but self-documenting, and they keep specificity flat and predictable:

bem.css

/* Block: a standalone component */
.card { }

/* Element: a part of the block (double underscore) */
.card__title { }
.card__image { }

/* Modifier: a variant (double dash) */
.card--featured { }
.card__title--large { }

card.html

<article class="card card--featured">
  <img class="card__image" src="..." alt="..." />
  <h3 class="card__title">Title</h3>
</article>

Tip

BEM's payoff is that every class is a single, low-specificity class, so rules never fight each other, and a name like card__title--large tells you exactly what it styles and where it belongs. You can read the HTML and understand the component structure at a glance.

Utility-first CSS

A different philosophy — popularised by Tailwind CSS — skips custom component classes and composes styles from many tiny, single-purpose utility classes right in the HTML. Instead of writing a .card rule, you apply flex, p-6, rounded-lg, and so on:

utility.html

<!-- Utility-first: compose styles from small, single-purpose classes -->
<div class="flex gap-4 p-6 rounded-lg shadow">
  <img class="w-16 h-16 rounded-full" src="..." alt="..." />
  <p class="text-lg font-bold">Jane Doe</p>
</div>

Note

Neither approach is "correct" — they're different trade-offs. BEMkeeps styling in CSS files with semantic names; utility-first keeps it in the HTML for speed and consistency. Many teams even blend them. Learn the ideas; the specific tool matters less.

Design tokens & resets

Design tokens are your custom properties from Module 21 used systematically — a single source of truth for colours, spacing, radii, and type. Define them once and your whole UI stays consistent. And because browsers ship slightly different default styles, most projects start with a reset or normalize stylesheet plus the box-sizing: border-box rule from Module 13, so everyone starts from the same clean baseline.

Recap & quick check

Key takeaways

CSS is global by default, so large projects need conventions to avoid collisions and specificity wars.
BEM names classes as Block, Block__Element, and Block--Modifier for flat, predictable styling.
Utility-first CSS composes styles from tiny single-purpose classes in the HTML (the Tailwind approach).
Design tokens (custom properties) give colours, spacing, and type a single source of truth.
Start projects with a reset/normalize and box-sizing: border-box for a consistent baseline.

Quick check

1. Why does CSS become hard to maintain at scale?

2. In BEM, what does .card__title represent?

3. In BEM, how is a modifier written?

4. What is the utility-first approach?

5. What are design tokens?

Your CSS can scale now. Next, one of the most important professional skills of all — accessibility.