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