CSS Architecture

What is CSS Architecture?

CSS architecture is how you structure your styles so they:

• Avoid conflicts
• Are easy to reuse
• Scale well with big projects

Popular methodologies include:

• BEM (Block Element Modifier)
• OOCSS (Object-Oriented CSS)
• SMACSS (Scalable and Modular Architecture for CSS)

1. BEM (Block Element Modifier)

Naming convention to keep code readable and organized.

• Format: .block .block__element .block--modifier
• Example:

<div class="button button--primary">
  <span class="button__icon"></span>
  Click me
</div>

.button {
  padding: 10px;
}

.button--primary {
  background-color: blue;
}

.button__icon {
  margin-right: 5px;
}

Clear relationship between components and their parts.

2. OOCSS (Object-Oriented CSS)

Separate structure and skin. Focuses on reusable patterns.

• Principles:

1. Separate structure from visual appearance
2. Separate containers from content

• Example:

<div class="media card">
  <img class="media-img" src="photo.jpg">
  <div class="media-body">Text</div>
</div>

.media {
  display: flex;
  align-items: center;
}

.card {
  border: 1px solid #ddd;
  background: #fff;
}

Reuse media for layout and card for design — modular and flexible.

SMACSS (Scalable and Modular Architecture for CSS)

SMACSS categorizes CSS into five types:

1. Base – Default styles (e.g., body, h1, a)
2. Layout – Page structure (e.g., .header, .sidebar)
3. Module – Reusable components (e.g., .card, .btn)
4. State – How things look in a specific state (e.g., .is-active, .is-hidden)
5. Theme – Visual changes (e.g., .theme-dark)

Example:

/* Base */
h1 { font-size: 2rem; }

/* Layout */
.layout-header { display: flex; }

/* Module */
.btn { padding: 10px; }

/* State */
.is-disabled { opacity: 0.5; }

/* Theme */
.theme-light .card { background: #fff; }

Encourages separation of concerns and scalability.