Formation 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).

  • Bonnes pratiques d’intégration
  • Gestion intelligente de la spécificité
  • Réutilisabilité des composants
  • Utilisation d’espaces de nom
  • Simplification du travail en équipe
  • Cas d’exemples concrets

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é.

Programme

  1. 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
  2. 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 ?
  3. 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

Prochaines sessions

(Sauf indication contraire, chaque date dispose d’au moins 4 places encore libres)

Tarifs

Vous inscrivezTarif unitaire
1 à 2 apprenant·e·s1 000 € HT
3 à 5 apprenant·e·s900 € HT
6+ apprenant·e·s800 € HT
Tarif fidélité850 € HT

Besoin d’une intra-entreprise ou sur-mesure ?

Pour une formation personnalisée, en accord avec vos besoins, dans vos locaux ou dans les nôtres, décrivez-nous votre besoin en détail.

Demander ma formation intra / sur mesure

Public visé et pré-requis

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).

Livrables

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.

Aspects logistiques

La formation se déroule dans une salle privative climatisée, lumineuse, fonctionnelle et très confortable. L’ensemble des locaux sont facilement accessibles en transports en commun et accessibles aux Personnes à Mobilité Réduite.

Situé à Paris, près de Nation, ils sont accessibles via pas moins de 5 lignes de métro, 1 ligne de RER et 5 lignes de bus :

  • Métro Ligne 2 Philippe-Auguste ou Alexandre Dumas
  • Métro Ligne 9 Charonne ou Rue des Boulets
  • Métro Ligne 8 Faidherbe-Chaligny
  • Métro Ligne 1 Ligne 6 RER Ligne A Nation
  • Bus Ligne 26 Ligne 57 Ligne 86 Nation
  • Bus Ligne 56 Charonne-Voltaire ou Boulets-Montreuil
  • Bus Ligne 76 Charonne-Philippe-Auguste
Delicious Insights

83 avenue Philippe-Auguste
75011 Paris

Voir sur Google Maps

On trouve également nombre de parkings alentour.

  • Chaque apprenant·e amène son propre poste de travail ou ordinateur portable.
  • L’accès internet est assuré par une connexion fibre très haut débit. La salle fournit un accès Wi-Fi et, pour les cas exceptionnel, une infrastructure Ethernet filaire.
  • Vous n’êtes pas en région parisienne et cherchez un hébergement ? Pourquoi ne pas passer par airbnb ? Ça existe même pour les entreprises.
  • Aucune installation préalable sur les machines des apprenant·e·s n’est nécessaire.

  • Les formations vont de 4 à 10 apprenant·e·s.

Les horaires indicatifs de la formation, pour un total de 7 heures par jour soit 14h de formation, sont :

  • 9h45Accueil, petit déjeuner (boissons chaudes et fraîches, viennoiseries)
  • 10hDébut de la journée
  • 12h30Déjeuner (inclus dans le prix)
  • 13h45Reprise
  • 16h15Pause café
  • 16h30Reprise
  • 18hFin de la journée

Vous pourrez retrouver toutes les informations sur les modalités d’inscription et de paiement, l’annulation et le remboursement dans nos Conditions Générales de Vente, sans oublier notre règlement intérieur.


Nos locaux, pour nos formations inter-entreprise (cliquez pour agrandir) :

Formatrice

Corinne Durrmeyer

Corinne Durrmeyer

Titulaire d’une maîtrise de « Concepteur-Designer graphique et multimédia » obtenue en 2005, Corinne a fait ses armes dans le domaine du développement web avant de devenir intégratrice indépendante en 2009.

Particulièrement sensible aux problématiques d’accessibilité, elle devient Experte AccessiWeb et commence à enseigner les bonnes pratiques de développement en formation post-Bac.

Depuis 2010, elle anime des conférences et des ateliers sur le thème du développement web partout en France et publie fin 2012 l’ouvrage web de référence « Intégration web - les bonnes pratiques » aux éditions Eyrolles.

Corinne est consultante front-end chez Inseo.