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 ?

Transcript

1. .modal.modal-yellow
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
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
4. LE BON VIEUX TEMPS la structure HTML dépend du style souhaité <center> <font> <basefont> <s> <u> <big>
5. HTML C’EST POUR LE CONTENU CSS C’EST POUR LA PRÉSENTATION le fond la forme
6. LE BON VIEUX TEMPS (BIS) le nommage HTML dépend du style souhaité <div class=“center”> • 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 :
7. APPROCHE « SÉMANTIQUE » le nommage HTML dépend de la fonction <div class=“warning”> • Mon HTML est propre, pourvu de sens, et je comprends bien à quoi sert chaque élément (enfin, normalement) Hey, c’est bon ça !
8. APPROCHE SÉMANTIQUE exemple concret https://codepen.io/adamwathan/pen/ZJeWBY?editors=1100
9. APPROCHE « SÉMANTIQUE » avantages et inconvénients <div class=“author-bio”> • 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…
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/
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
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/
13. BEM exemple concret https://codepen.io/adamwathan/pen/ZJepYj?editors=1100
14. BEM avantages et inconvénients <div class=“author__bio”> • 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 :
15. BEM avantages et inconvénients <div class=“author__bio”> • 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)
16. APPROCHE ATOMIQUE principe des « classes utilitaires » https://acss.io/
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
18. ATOMIQUE avantages et inconvénients <div class=“rounded bg-white block md:grid md:grid-cols-3”> • 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 :
19. ATOMIQUE avantages et inconvénients <div class=“rounded bg-white block md:grid md:grid-cols-3”> • Ç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
20. OUTIL : TAILWIND un framework « utility first » https://tailwindcss.com/
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