CSS Architecture: BEM & File Structure

Why naming matters

On a small page, class names like .red or .box2 work fine. On a real product with dozens of components and several developers, vague names cause chaos: styles leak between components, two people pick the same class name, and nobody dares delete anything for fear of breaking another page. A naming methodology prevents this by giving every class a clear, predictable, self-documenting name.

BEM — Block, Element, Modifier

BEM is the most popular naming convention. It splits every class into up to three parts:

• Block — a standalone component. Example: card, menu, button.
• Element — a part inside a block, joined with two underscores. Example: card__title, card__image.
• Modifier — a variation of a block or element, joined with two hyphens. Example: card--featured, button--large.

So the pattern is block__element--modifier. The double underscore and double hyphen are deliberate — they make the three roles instantly recognisable. Here is a card written the BEM way:

<style>
  .card { border:1px solid #e6e8f0; border-radius:12px; padding:16px; background:#fff; }
  .card__title { color:#4338ca; margin:0 0 6px; font-size:18px; }
  .card__text  { color:#5b6178; margin:0; }
  /* Modifier: a featured variation of the same block */
  .card--featured { border-color:#4338ca; background:#eef2ff; }
</style>

<div class="card card--featured">
  <h3 class="card__title">Featured Plan</h3>
  <p class="card__text">A featured card uses the modifier class for its variation.</p>
</div>
<div class="card">
  <h3 class="card__title">Standard Plan</h3>
  <p class="card__text">The same block and elements, without the modifier.</p>
</div>

Read the class names and the structure is obvious without seeing the CSS:

• card is the block (the component). Both cards use it.
• card__title and card__text are elements inside the block — the double underscore says “this belongs to card”.
• card--featured is a modifier — the double hyphen says “this is a variation of card”. The first card adds it (so it gets the indigo treatment); the second does not.
• Crucially, every selector is a single class — flat and low-specificity. There are no long .card .title chains, so nothing leaks and nothing fights over specificity.

File structure: the 7-1 pattern

Naming solves clashes; file structure solves “where does this style live?”. The popular 7-1 pattern (used heavily with Sass) splits your CSS into seven folders plus one main file that imports them all:

A single main.scss then imports everything in order, so the cascade is predictable. A trimmed example:

// main.scss — the one file you compile
@use "abstracts/variables";
@use "abstracts/mixins";
@use "base/reset";
@use "base/typography";
@use "components/button";
@use "components/card";
@use "layout/header";
@use "layout/footer";

Each line pulls in one partial, grouped by purpose and ordered from most general (variables, resets) to most specific (components, layout). When you need to change a button, you know exactly where to look: components/button. New developers can navigate the codebase on day one. This is the difference between “styles a page” and “works on a team codebase”.