ITCSS (Inverted Triangle CSS)

Définition

Architecture CSS en triangle inverse : du plus générique (settings, tools) au plus spécifique (utilities). Chaque couche a une spécificité croissante.

Analogie

Un entonnoir : en haut le général (variables), en bas le spécifique (overrides) avec une spécificité croissante.

Exemple de code

// Ordre d'import ITCSS
// 1. Settings  ($variables)
// 2. Tools     (mixins, functions)
// 3. Generic   (reset, normalize)
// 4. Elements  (h1, p, a)
// 5. Objects   (.container, .grid)
// 6. Components (.card, .btn)
// 7. Utilities  (.hidden, .mt-4)

Cas d'usage

Éviter les guerres de spécificité dans les grands projets en structurant le CSS par couches.

Termes liés