Architecture CSS

Programme

Pourquoi cette méthode ?

Rappel sur le fonctionnement de CSS

  • Anatomie d’une règle

  • Les origines de la règle : les styles de l’agent utilisateur, de l’utilisateur et de l’auteur

  • Comprendre le calcul de la spécificité des sélecteurs

  • La notion d’importance et le cas particulier des propriétés raccourcies

  • Le principe de l’héritage

  • La portée des styles

Problèmes d’une organisation CSS « traditionnelle »

  • Hiérarchie des styles imprévisible

  • Gestion chaotique de la spécificité

  • Abus de sélecteurs trop spécifiques

ITCSS (Inverted Triangle CSS)

Objectifs

  • Ordonner les déclarations en s’appuyant sur le mode d’analyse du navigateur

  • Avoir un niveau de spécificité qui évolue de façon logique et rationnelle

  • Éviter les guerres de spécificité

Principes fondamentaux (a.k.a. les 3 côtés du triangle)

  • Spécificité : quel poids le sélecteur doit-il avoir ?

  • Précision : à quel point le sélecteur doit-il être détaillé ?

  • Portée : combien d’éléments le sélecteur doit-il concerner ?

Bénéfices

  • Simplifier la (re)prise en main du code

  • Limiter le nombre de règles en exploitant au maximum le principe de la cascade

  • Faciliter la maintenance en groupant les styles par couches fonctionnelles

  • Savoir où placer les styles au sein du code CSS

  • Privilégier une approche modulaire en s’appuyant sur OOCSS (Object Oriented CSS)

  • Donner aux règles le niveau de priorité adéquate

  • Prévenir les surcharges accidentelles non souhaitées

En pratique

  • Comment est structuré le projet ?

  • Quelle dénomination est utilisée pour les fichiers ?

  • Dans quel ordre sont déclarés les styles ?

BEM + ITCSS = BEMIT

Convention de nommage BEM

  • Syntaxe Block Element Modifier

  • Auto-documentation du code (HTML et CSS)

  • Indépendance entre le code CSS et la structure du DOM

  • Savoir distinguer un bloc d’un élément

Extensions ITCSS

  • Préfixes et espaces de nom : renseigner la couche à laquelle le style appartient

  • Suffixes responsive : indiquer le palier sur lequel le style est appliqué

  • Organisation des attributs HTML : respecter un ordre d’apparition