SMACSS

Definition

Scalable and Modular Architecture for CSS. Categorise les styles en 5 types : Base, Layout (l-), Module, State (is-), Theme. Aide a la maintenabilite.

Analogie

Un code de rangement par couleur : chaque type de vetement a sa couleur d'etiquette.

Exemple de code

/* Base */
body { font: 16px/1.5 sans-serif; }
/* Layout */
.l-sidebar { width: 250px; }
/* Module */
.card { border: 1px solid #ddd; }
/* State */
.is-active { display: block; }
/* Theme */
.theme-dark .card { background: #333; }

Cas d'usage

Structurer un CSS legacy ou un projet sans framework composant (multi-page apps).

Termes lies