Architecture CSS
Architecturer correctement le code CSS pour qu’il soit cohérent, performant et qu’il puisse être facilement pris en main par les différents intervenants n’est pas chose aisée. La formation Architecture CSS comble ce besoin en faisant découvrir aux apprenant·e·s une méthode d’architecture permettant d’organiser le code CSS afin qu’il soit fonctionnel, maintenable et évolutif.
Développée en 2015 par Harry Roberts, cette méthode (ITCSS pour Inverted Triangle CSS) est parfaitement éprouvée et applicable à tous les projets : elle peut être employée sur tous les types de site, et ce quels que soient leur trafic, leur historique ou la taille de leur équipe de développement. Cerise sur le gâteau, elle est utilisable avec n’importe quelle convention de nommage (et s’accorde particulièrement bien avec BEM).
Objectifs
La formation Architecture CSS vise à permettre aux apprenant·e·s de :
améliorer leur productivité grâce à une organisation logique et prévisible du code CSS ;
tirer le meilleur parti de la cascade afin de limiter les surcharges et éviter les guerres de spécificité ;
favoriser la réutilisabilité et l’évolutivité du code en développant de façon modulaire ;
prévenir les fuites de styles en utilisant des espaces de nom ;
faciliter le travail en équipe et la maintenance en regroupant les styles par couches fonctionnelles ;
encourager la mise en œuvre de méthodologies et de conventions de nommage communes dans la société.
Public visé
La formation Architecture CSS s’adresse à toutes les personnes amenées à écrire du code CSS (occasionnellement ou régulièrement), et ce quel que soit leur profil.
Elle vise aussi bien les profils front-end ou full stack qui manient les feuilles de styles au quotidien (et qui souhaitent améliorer la qualité et la maintenabilité de leur code), que les profils back-end qui mettent en place des règles CSS pour répondre à un besoin ponctuel.
En pré-requis, seule une connaissance « standard » de la couche client est attendue (HTML et CSS donc).
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
Moyens pédagogiques et techniques, suivi et appréciation
Les apprenant·e·s reçoivent, en début de session, l’ensemble des diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi du plan de cours.
Après la session, ils reçoivent par ailleurs, avec un e-mail de debrief très fourni et riche en ressources, une archive de référence, contenant les codebases finalisées, entièrement documentées et testées, les slides de toute la formation et diverses ressources complémentaires.
Demander une convention de formation Prochaines sessions de formation
Tarifs indicatifs
| Apprenant·e·s de la convention | Tarif unitaire |
|---|---|
| 1 à 2 personnes | 1 000 € HT |
| 3 à 5 personnes | 900 € HT |
| À partir de 6 personnes | 800 € HT |
Vous souhaitez une formation intra entreprise ou sur mesure ?
Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux ou dans nos locaux.
Demander ma formation intra / sur mesure