Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Conventions de nommage en CSS

Conventions de nommage en CSS

Comment nommer les éléments en HTML et CSS, en demeurant consistant, même si le projet ou l'équipe évolue ?
Peut-on vraiment séparer le fond (HTML) de la forme (CSS) quand il s'agit de nommage ?

Raphael Goetter

October 22, 2020
Tweet

More Decks by Raphael Goetter

Other Decks in Programming

Transcript

  1. .modal.modal-yellow

    View Slide

  2. STRUCTURE nav, header, section, aside, ….
    LAYOUT
    COMPOSANT
    UTILITAIRE
    TYPOGRAPHIE
    l-overlay, l-grid, l-full-bleed, l-gallery,…
    c-modal, c-navigation, c-button
    u-bold, u-txt-left, u-onyx, u-uppercase
    h1, p, …
    VARIANTE c-modal-yellow, c-button-primary, l-grid-3

    View Slide

  3. DIFFÉRENTES APPROCHES
    CSS : de l’artisanal à l’industriel
    1. Séparation du contenu et de la présentation ?

    nommage descriptif Vs nommage graphique

    2. Approche « BEM »

    Une sémantique sans dépendance de la structure HTML

    3. Approche « Atomique »

    Où chaque classe CSS correspond à une action

    View Slide

  4. LE BON VIEUX TEMPS
    la structure HTML dépend du style souhaité






    View Slide

  5. HTML C’EST POUR
    LE CONTENU
    CSS C’EST POUR LA
    PRÉSENTATION
    le fond
    la forme

    View Slide

  6. LE BON VIEUX TEMPS (BIS)
    le nommage HTML dépend du style souhaité

    • Une classe « center » est purement graphique, or HTML ne devrait véhiculer que des
    informations de contenu, être dénué de notions de style.
    Alors, euh oui mais…
    • Si cet élément change de style selon le contexte (n’est plus centré sur un grand écran
    par exemple), le choix de classe devient incohérent.
    Ah tiens, j’ai un problème :

    View Slide

  7. APPROCHE « SÉMANTIQUE »
    le nommage HTML dépend de la fonction

    • Mon HTML est propre, pourvu de sens, et je comprends bien à quoi sert chaque
    élément (enfin, normalement)
    Hey, c’est bon ça !

    View Slide

  8. APPROCHE SÉMANTIQUE
    exemple concret
    https://codepen.io/adamwathan/pen/ZJeWBY?editors=1100

    View Slide

  9. APPROCHE « SÉMANTIQUE »
    avantages et inconvénients

    • C’est marrant, mais c’est assez vite compliqué de trouver des noms de classe
    cohérents (coucou .modal-wrapper > .inner-content > .warning-global !)
    Alors, euh oui mais…
    • Mon HTML n’a plus de notions de styles… mais maintenant c’est CSS qui devient
    très dépendant de ma structure HTML car les noms de classes ne contiennent plus
    d’informations graphiques. Finalement, je n’ai pas séparé HTML de CSS.
    Mais en fait…

    View Slide

  10. MÉTHODOLOGIE « BEM »
    « block - element - modifier »
    1. Block

    entité indépendante et autonome
    2. Element

    partie intégrante d’un Block
    3. Modifier

    variante d’un Block ou Element
    http://getbem.com/

    View Slide

  11. BEM
    Nommage des Blocks :
    Nommage des Elements :
    Nommage des Modifiers :
    Règle : block name + __ + element name
    Règle : block name OU element name + -- + modifier name
    un nommage contraignant
    .card .form .post .main-navigation
    .card__title .post__author .post__date
    .card__title--disabled .post--important

    View Slide

  12. BEM
    principes essentiels
    Tous les éléments HTML doivent chacun avoir un nom sous forme de
    classe(s) CSS (pas de nommage via id)
    1
    Les sélecteurs CSS ne doivent cibler que des classes

    (pas de sélecteur nav, ni a, ni ul par exemple)
    2
    Les sélecteurs CSS composés sont à éviter 

    (pas de .menu .list, ou de .navigation > a)
    3
    http://getbem.com/

    View Slide

  13. BEM
    exemple concret
    https://codepen.io/adamwathan/pen/ZJepYj?editors=1100

    View Slide

  14. BEM
    avantages et inconvénients

    • Pas de surprises, je suis sûr de comprendre à quoi sert chaque élément et de choisir
    le bon nommage quand j’en crée un nouveau.
    Impossible de se tromper !
    • La structure HTML peut changer sans aucun impact sur le styles (car CSS ne cible
    que des classes et non des balises HTML).

    • C’est facile de maintenir / modifier / écraser des styles car il n’y a qu’un seul niveau
    de poids : un sélecteur CSS = une seule classe.
    Et c’est pas tout :

    View Slide

  15. BEM
    avantages et inconvénients

    • Mon code HTML a doublé de taille, car chacun des éléments (même s’il n’est pas
    utilisé) doit avoir un nom de classe, voire plusieurs.

    • Et surtout, comment je peux gérer efficacement tous mes composants très similaires
    graphiquement mais dont la fonction est différente ? 

    (ex. un .article__preview quasi identique à .author__bio)
    Mais d’un autre côté…
    (au final, on s’imposera un niveau d’abstraction (content-agnostic) tel
    que .card ou .btn ou .badge)

    View Slide

  16. APPROCHE ATOMIQUE
    principe des « classes utilitaires »
    https://acss.io/

    View Slide

  17. ATOMIQUE
    principes essentiels
    À chaque classe CSS correspond une seule fonction

    (ex. .txt-left {text-align: left} ou .mr-2 {margin-right: 2rem} )
    1
    Le styles CSS sont dénués de contexte pour être totalement
    indépendants de la structure HTML
    2
    Les sélecteurs CSS composés n’existent pas 

    (pas de .menu .list, ou de .navigation > a)
    3
    https://www.smashingmagazine.com/2013/10/challenging-css-best-practices-atomic-approach/
    Il n’est plus nécessaire d’intervenir dans la feuille de styles CSS : plus
    aucun CSS à écrire, modifier ou maintenir
    4

    View Slide

  18. ATOMIQUE
    avantages et inconvénients

    • Pas de surprises, le nommage existe déjà.

    • Je n’ai même pas besoin de fouiller dans mon fichier CSS, tout se passe côté HTML
    Impossible de se tromper !
    • Se fonder sur un nombre de classes restreint impose une cohérence 

    (difficile d’avoir 150 niveaux de gris différents par ex.)

    • Les contextes d’affichage tels que le Responsive sont parfaitement pris en charge.
    Et c’est pas tout :

    View Slide

  19. ATOMIQUE
    avantages et inconvénients

    • Ça pique carrément les yeux !

    • Mon HTML est alourdi, difficile à lire, et contient partout de multiples classes

    • Mon CSS, s’il doit prévoir toutes les classes utilitaires dans tous les contextes
    possibles, aura une taille gigantesque.
    Ouais OK mais par contre…
    https://adamwathan.me/css-utility-classes-and-separation-of-concerns/
    super argumentaire

    View Slide

  20. OUTIL : TAILWIND
    un framework « utility first »
    https://tailwindcss.com/

    View Slide

  21. LE MOT DE LA FIN
    Pour Yahoo!, ACSS s’est révélé être un super outil mais si je
    devais refaire mon site perso demain ce serait certainement 80%
    sémantique et 20% atomique (« utility classes »).
    Et pour une page toute con, je pense que ça frôlerait les 99.99%
    (sémantique ou atomique selon l’humeur du moment).

    Thierry Koblenz 2016

    View Slide