ITCSS (Inverted Triangle CSS)

Definition

Architecture CSS en triangle inverse : du plus generique (settings, tools) au plus specifique (utilities). Chaque couche a une specificite croissante.

Analogie

Un entonnoir : en haut le general (variables), en bas le specifique (overrides) avec une specificite 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

Eviter les guerres de specificite dans les grands projets en structurant le CSS par couches.

Termes lies