CSS `SMACSS` Methodology

Scalable and Modular Architecture for CSS: Organize, scale, and maintain your stylesheets with confidence!

What is SMACSS?

SMACSS (Scalable and Modular Architecture for CSS) is a flexible CSS methodology created by Jonathan Snook. It provides a set of guidelines for categorizing CSS rules, making your stylesheets more scalable, maintainable, and modular as your project grows.

Base Rules: Default element styles (e.g., body, h1, ul).
Layout Rules: Major page sections and grid structures (e.g., .layout-header, .layout-sidebar).
Module Rules: Reusable, self-contained components (e.g., .card, .nav).
State Rules: Styles for different states or variations (e.g., .is-active, .is-hidden).
Theme Rules: Visual design variations (e.g., .theme-dark, .theme-light).

SMACSS Rule Types

/* Base */
body { font-family: sans-serif; }
h1 { font-size: 2rem; }

/* Layout */
.layout-header { ... }
.layout-sidebar { ... }

/* Module */
.card { ... }
.card__title { ... }

/* State */
.is-active { ... }
.is-hidden { ... }

/* Theme */
.theme-dark { ... }
.theme-light { ... }

💡 Tip: SMACSS is a guideline, not a rigid framework—adapt it to fit your project's needs!

Best Practice: Keep modules independent and use state classes for dynamic changes.

Interactive Examples

Layout & Module Example

Card Title

This is a reusable card module.

/* Layout */
.layout-header { ... }

/* Module */
.card { ... }
.card__title { ... }
.card__desc { ... }
.card__btn { ... }

State & Theme Example

Dark Card (Active)

This card uses .theme-dark and .is-active state.

/* State */
.is-active { ... }
.is-hidden { ... }

/* Theme */
.theme-dark { ... }
.theme-light { ... }

Try it: Compare the cards and navigation above. Layout, module, state, and theme classes work together for scalable, maintainable CSS!