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 :

  • Organiser leur code CSS de façon logique et prévisible pour améliorer leur productivité ;

  • tirer le meilleur parti de la cascade afin de limiter les surcharges et éviter les guerres de spécificité ;

  • développer de façon modulaire pour favoriser la réutilisabilité et l’évolutivité du code ;

  • utiliser des espaces de nom pour prévenir les fuites de styles ;

  • regrouper les styles par couches fonctionnelles pour faciliter le travail en équipe et la maintenance ;

  • encourager la mise en œuvre de méthodologies et de conventions de nommage communes dans l’entreprise.

Pré-requis

  • Disposer d'un ordinateur de performance suffisante, correctement configuré (notamment selon l’éventuel guide d’installation associé à la formation et indiqué au plus tard en convocation)
  • Cet ordinateur doit être équipé d'une webcam, d'un micro et d'une sortie audio
  • Disposer d'une connexion internet avec un débit minimal descendant/montant de 1Mbps, et idéalement au moins 5Mbps (tester ici)
  • Pouvoir exécuter Zoom, soit en tant que logiciel installé, soit via le client 100% web. Le bon fonctionnement du client installé peut être testé ici. Seule une connaissance « standard » de la couche client est attendue (HTML et CSS donc). Spécifiquement, les apprenant·e·s doivent avoir déjà eu à intégrer au moins 10 pages web, en prenant en charge les volets HTML et CSS (mais pas nécessairement JS).

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, à chaque début de période, un accès aux diapositives du support de cours au format web, afin de pouvoir faciliter leur suivi.

Après la session, ils reçoivent par ailleurs :

  • un e-mail de debrief très fourni et riche en ressources,

  • une archive de référence, contenant les éléments de code finalisés, les slides de toute la formation et diverses ressources complémentaires.

L’évaluation des acquis se fait en cours de formation, au moyen de la réussite des exercices interactifs.

Demander une convention de formation Prochaines sessions de formation

Tarifs indicatifs

Apprenant·e·s de la conventionTarif unitaire
1 à 2 personnes1 000 € HT
3 à 5 personnes900 € HT
À partir de 6 personnes800 € 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