ITCSS

Definition

Inverted Triangle CSS : architecture qui organise le CSS en couches de spécificité croissante (Settings, Tools, Generic, Elements, Objects, Components, Utilities). Élimine les guerres de spécificité.

Analogie

Comme un entonnoir inversé : on part du plus générique (reset) pour aller vers le plus spécifique (utilities).

Exemple de code

/* 1. Settings */   /* Variables */
/* 2. Tools */      /* Mixins */
/* 3. Generic */    /* Reset, box-sizing */
/* 4. Elements */   /* h1, a, p (sans classes) */
/* 5. Objects */    /* Layout patterns */
/* 6. Components */ /* .card, .btn */
/* 7. Utilities */  /* .u-hidden, .u-flex */

Cas d'usage

Architecturer le CSS d'un projet conséquent pour une maintenabilité à long terme.

Termes lies