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 ?
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 :
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…
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/
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
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/
• 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 :
• 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)
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
• 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 :
• 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
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
goetter
azukiazusa1
morux2
eddie
prof18
ostk0069
marcustung
trapezoid
akakou
fwbrasil
smt7174
kamilahsantos
hitsuji1991
eileencodes
reverentgeek
akmur
scottboms
chrisshort
thoeni
iamctodd
sachag
sonatard
yeseniaperezcruz
colly
danielanewman