CSS Architecture

Introduction

When CSS projects grow, styles can easily become a mess of conflicts and overrides. CSS Architecture provides the rules and patterns to keep your stylesheets scalable, maintainable, and predictable.

In this chapter, you will learn the most popular methodologies:

• BEM (Block, Element, Modifier) - The industry standard.
• OOCSS (Object-Oriented CSS) - Separating structure from skin.
• SMACSS (Scalable and Modular Architecture) - Categorizing rules.
• How to choose the right approach for your team.

BEM (Block Element Modifier)

BEM is the most widely adopted naming convention. It reduces specificity issues and makes code self-explanatory.

Syntax Breakdown

/* Block */
.card {}

/* Element (Double Underscore) */
.card__title {}

/* Modifier (Double Hyphen) */
.card--featured {}

Real-World BEM Example

<div class="card card--featured">
  <h3 class="card__title">Product Name</h3>
  <button class="button button--primary">Buy Now</button>
</div>

OOCSS (Object-Oriented CSS)

OOCSS focuses on separating structure from skin (appearance) to encourage reuse.

/* Structure (Reusable Layout) */
.box {
  padding: 16px;
  border-radius: 4px;
}

/* Skin (Visuals) */
.box-primary {
  background: #007bff;
  color: white;
}

SMACSS (Scalable Modular Architecture)

SMACSS organizes code into five categories to keep large projects structured.

• Base: Default styles (e.g., body, h1 reset).
• Layout: Major sections (e.g., .header, .footer).
• Module: Reusable components (e.g., .card, .nav).
• State: Variations (e.g., .is-active, .is-hidden).
• Theme: Visual skins (e.g., .theme-dark).

Common Beginner Mistakes & Best Practices