SMACSS

Définition

Scalable and Modular Architecture for CSS. Catégorisé 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 vêtement a sa couleur d'étiquette.

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 liés