Block-Element-Modifier (BEM) & CSS atomique –

Ce qui suit est un court extrait du prochain livre de Tiffany, CSS Master, 2nd Edition qui sera disponible sous peu.

Nous allons maintenant examiner deux méthodes pour nommer les choses dans CSS. Les deux méthodes ont été créées pour améliorer le processus de développement des grands sites et des grandes équipes. Cependant, ils travaillent aussi bien pour des équipes de un. Que vous choisissiez l'un ou l'autre, vous ne pouvez choisir ni l'un ni l'autre, ni les deux. Le but de les introduire est de vous aider à réfléchir à des méthodes d’écriture de votre propre CSS.

Modificateur d’éléments de bloc (BEM)

BEM ou Modificateur d’éléments de blocs, est une système de nommage et une suite d'outils associés. Créé à Yandex BEM a été conçu pour un développement rapide par des équipes de développement importantes. Dans cette section, nous allons nous concentrer sur le concept et le système de nommage.

La méthodologie BEM encourage les concepteurs et les développeurs à considérer un site Web comme un ensemble de blocs de composants réutilisables . créer des interfaces. Un bloc est simplement une section d'un document, tel qu'un en-tête, un pied de page ou une barre latérale, illustré ci-dessous. Peut-être confondant, «bloc» fait ici référence aux segments de HTML qui constituent une page ou une application.

Les blocs peuvent contenir d'autres blocs. Par exemple, un bloc d'en-tête peut également contenir des blocs de formulaire de logo, de navigation et de recherche, comme illustré ci-dessous. Un bloc de pied de page peut contenir un bloc de plan de site.

Plus granulaire qu'un bloc est un élément . Comme l'explique la documentation de BEM :

Un élément est une partie d'un bloc qui effectue une certaine fonction. Les éléments dépendent du contexte: ils n'ont de sens que dans le contexte du bloc auquel ils appartiennent.

Un bloc de formulaire de recherche, par exemple, contient un élément de saisie de texte et un élément de bouton de soumission, comme en témoigne figure_title . (Pour plus de clarté, nous utilisons «element» dans le sens de l'élément design plutôt que dans l'élément HTML).

, d'autre part, pourrait avoir un bloc de liste d'articles. Ce bloc de liste d'articles peut contenir une série de blocs promotionnels d'articles. Et chaque bloc de promotion d'article peut contenir des éléments image, extrait et «Lire la suite», présentés ci-dessous.

Ensemble, blocs et éléments forment la base de la convention de dénomination BEM. Selon les règles de BEM:

• les noms de blocs doivent être uniques dans un projet
• les noms d’éléments doivent être uniques dans un bloc
• les variations d’un bloc, par exemple une zone de recherche modificateur du nom de la classe

Les noms de blocs et les noms d'éléments sont généralement séparés par un double trait de soulignement ( .block__element ). Les noms de bloc et d'élément sont généralement séparés des noms de modificateur par un double trait d'union (par exemple, .block - modificateur ou .block__element - modificateur ). like using un exemple de formulaire de recherche:

    

         Recherche 
        
         Recherche 
    

Une variante de cette forme avec un arrière-plan foncé pourrait utiliser le balisage suivant:

    

         Recherche pour: 
        
         Recherche 
    

Notre CSS pourrait ressembler à ceci:

 .search {
    couleur: # 333;
}
.search - inverse {
    couleur: #fff;
    contexte: # 333;
}
.search__submit {
    contexte: # 333;
    frontière: 0;
    couleur: #fff;
    hauteur: 2rem;
    display: inline-block;
}
.search__submit - inverse {
    couleur: # 333;
    background: #ccc;
}

Dans notre balisage et CSS, search - inverse et search__label - inverse sont des noms de classe supplémentaires. Ils ne sont pas des remplaçants pour search et search__label . Les noms de classe sont le seul type de sélecteur utilisé dans un système BEM. Des sélecteurs enfants et descendants peuvent être utilisés, mais les descendants doivent également être des noms de classe. Les sélecteurs d'élément et d'ID sont verboten. Appliquer l'unicité des noms de bloc et d'élément empêche également les collisions de nommage, ce qui peut poser problème parmi les équipes.

Cette approche présente plusieurs avantages:

• Il est facile pour les nouveaux membres de lire le balisage et les CSS.
• L'ajout de développeurs augmente la productivité de l'équipe
• Le nommage cohérent réduit la possibilité de collisions et d'effets secondaires de noms de classes
• CSS est indépendant du balisage
• CSS est hautement réutilisable

peut facilement s'intégrer dans une section d'un chapitre. Le site BEM décrit cette méthodologie de manière beaucoup plus détaillée et propose également des outils et des didacticiels pour vous aider à démarrer. Pour en savoir plus sur l'aspect convention de nommage de BEM, une autre ressource fantastique est Obtenir BEM .

Atomic CSS

Si BEM est le secteur chéri, Atomic CSS est son rebelle. Nommé et expliqué par Thierry Koblentz de Yahoo dans son œuvre de 2013, « Challenging CSS Best Practices », Atomic CSS utilise une bibliothèque de noms de classes étroite. Ces noms de classe sont souvent abrégés et séparés du contenu qu'ils affectent. Dans un système CSS atomique, vous pouvez dire ce que fait le nom de la classe – mais il n’ya pas de relation entre les noms de classes (du moins pas ceux utilisés dans la feuille de style) et les types de contenu.

Vous trouverez ci-dessous un ensemble de règles dans ce que nous pourrions appeler une architecture CSS conventionnelle. Ces jeux de règles utilisent des noms de classe décrivant le contenu auquel ils s'appliquent – une boîte de message globale et des styles pour les zones de message «succès», «avertissement» et «erreur»:

 .msg {
    couleur d'arrière-plan: # a6d5fa;
    border: 2px solide # 2196f3;
    rayon de bordure: 10px;
    font-family: sans-serif;
    rembourrage: 10px;
}
.msg-success {
    couleur d'arrière-plan: #aedbaf;
    bordure: 2px solide # 4caf50;
}
.msg-warning {
    couleur de fond: # ffe8a5;
    border-color: # ffc107;
}
.msg-error {
    couleur d'arrière-plan: # faaaa4;
    border-color: # f44336;
}

Pour créer un message d'erreur, nous devons ajouter les noms de classe msg et msg-error à l'attribut de classe de l'élément: [19659040] Une erreur s'est produite.

Comparons cela avec un système atomique, où chaque déclaration devient sa propre classe:

 .bg-a {
    couleur d'arrière-plan: # a6d5fa;
}
.bg-b {
    couleur d'arrière-plan: #aedbaf;
}
.bg-c {
    couleur de fond: # ffe8a5;
}
.bg-d {
    couleur d'arrière-plan: # faaaa4;
}
.bc-a {
    border-color: # 2196f3;
}
.bc-b {
    border-color: # 4caf50;
}
.bc-c {
    border-color: # ffc107;
}
.bc-d {
    border-color: # f44336;
}
.br-1x {
    rayon de bordure: 10px;
}
.bw-2x {
    border-width: 2px;
}
.bss {
    style de bordure: solide;
}
.sans {
    style de police: sans-serif;
}
.p-1x {
    rembourrage: 10px;
}

C’est beaucoup plus de CSS. Recréons maintenant notre composant de message d'erreur. En utilisant Atomic CSS, notre balisage devient:

Notre balisage est également plus verbeux. Mais que se passe-t-il lorsque nous créons un composant de message d’avertissement?

     Avertissement: Le prix de cet article a changé.

Deux noms de classes ont été modifiés: bg-d et bc-d ont été remplacés par bg-c et bc-c . Nous avons réutilisé cinq ensembles de règles. Maintenant, créons un bouton:

 Sauvegarder 

Hé maintenant! Nous avons réutilisé quatre jeux de règles et évité d’ajouter d’autres règles à notre feuille de style. Dans une architecture CSS atomique robuste, l'ajout d'un nouveau composant HTML tel qu'une barre latérale d'article ne nécessitera pas l'ajout de CSS (même si, en réalité, il faudra peut-être en ajouter un peu plus).

classes dans votre CSS, mais pris à l'extrême. Plus précisément,

• garde les découpages CSS en créant des styles hautement granulaires et hautement réutilisables, au lieu d'un ensemble de règles pour chaque composant
• réduit considérablement les conflits de spécificité en utilisant un système de sélecteurs de faible spécificité
• développement une fois que les règles initiales sont définies

Cependant, Atomic CSS n'est pas sans controverse.

Le cas contre les CSS atomiques

Atomic CSS va à l'encontre de tout ce que nous avons appris sur l'écriture de CSS. On se sent presque aussi mal que de coller style attributs partout. En effet, l’une des principales critiques de la méthodologie CSS Atomic est qu’elle brouille la ligne de démarcation entre le contenu et la présentation. Si class = "fl m-1x" flotte un élément à gauche et ajoute une marge de dix pixels, que faisons-nous quand nous ne voulons plus que cet élément flotte à gauche?

Une réponse, bien sûr, est de supprimer la classe fl de notre élément. Mais maintenant, nous modifions le HTML. Toute la raison derrière l'utilisation de CSS est que le balisage n'est pas affecté par la présentation et vice versa. (Nous pouvons également résoudre ce problème en supprimant la règle .fl {float: left;} de notre feuille de style, bien que cela affecterait tous les éléments ayant un nom de classe de fl .) , la mise à jour du code HTML peut être un petit prix à payer pour le trimmer CSS.

Dans le message original de Koblentz, il a utilisé des noms de classe tels que .M-10 marge: 10px .P-10 pour padding: 10px . Le problème avec une telle convention de nommage devrait être évident. Passer à une marge de cinq ou 20 pixels signifie que nous devrions mettre à jour notre code HTML et notre HTML, ou risquer d'avoir des noms de classes qui ne décrivent pas correctement leur effet.

p-1x comme cela est fait dans cette section, résout ce problème. La partie 1x du nom de classe indique un rapport plutôt qu'un nombre défini de pixels. Si le remplissage de base est de cinq pixels (c'est-à-dire .p-1x {padding: 5px;} ), alors .p-2x définirait dix pixels de remplissage. Oui, c'est moins descriptif de ce que fait le nom de la classe, mais cela signifie aussi que nous pouvons changer notre CSS sans mettre à jour notre HTML et sans créer un nom de classe trompeur.

Une architecture CSS atomique ne nous empêche pas d'utiliser class noms qui décrivent le contenu dans notre balisage . Vous pouvez toujours ajouter .button-close ou .accordion-trigger à votre code. De tels noms de classe sont en fait préférables pour les manipulations JavaScript et DOM.

CSS BEM versus Atomic CSS

BEM fonctionne mieux quand un grand nombre de développeurs construisent des modules CSS et HTML en parallèle. Cela permet d'éviter les erreurs et les bogues créés par des équipes importantes. Elle évolue bien en partie parce que la convention de dénomination est descriptive et prévisible. Le BEM n'est pas seulement pour les grandes équipes, mais il fonctionne vraiment bien pour les grandes équipes.

Le CSS atomique fonctionne mieux quand il y a une petite équipe ou un seul ingénieur ensemble de règles CSS, avec des composants HTML complets créés par une équipe plus importante. Avec Atomic CSS, les développeurs peuvent simplement consulter un guide de style, ou le source CSS, pour déterminer le jeu de noms de classes dont ils auront besoin pour un module particulier.

Savoir quand il faut aller

En pratique, votre CSS peut inclure un mélange d'approches. Vous pouvez avoir des noms de classe décrivant le contenu ou les composants en plus des noms de classes d'utilitaires qui affectent la mise en page. Si vous ne contrôlez pas complètement le balisage, comme avec un CMS, aucune de ces approches ne peut être utile. Vous devrez peut-être même utiliser des sélecteurs longs et spécifiques pour obtenir ce que vous voulez.

Tiffany Brown est un développeur web indépendant et rédacteur technique basé à Los Angeles. Brown offre des services de développement Web et de conseil à de grandes agences et à de petites entreprises. Ancien membre de l'équipe des relations avec les développeurs d'Opera Software, Brown est également co-auteur du livre JumpStart HTML5 de SitePoint. Elle écrit de façon sporadique sur la technologie de développement Web sur son blog . Vous pouvez la suivre sur Twitter à @webinista .