Share
Regardons les choses en face, nous voulons tous rendre notre code plus facile à lire. Cela nous aide à travailler plus rapidement et plus efficacement et lorsque d'autres personnes travaillent avec nous, nous pouvons conserver une clarté et une sémantique cohérentes. De nos jours, il semble y avoir tant de normes et de termes dans le monde des CSS: OOCSS, SMACSS, BEM et plus encore! Ce sont toutes des approches pour améliorer la structure de CSS, et aujourd'hui nous allons couvrir BEM.
BEM signifie Modificateur d'élément de bloc. Il suggère une manière structurée de nommer vos classes, en fonction des propriétés de l'élément en question. Si vous avez déjà vu un nom de classe comme header__form-email c'est BEM en action. Lorsque vous utilisez la méthodologie BEM, notez que nous n'utiliserons que des noms de classe (et non des identifiants). Les noms de classe vous permettent de répéter le nom BEM si nécessaire et de créer une structure de codage plus cohérente (à la fois dans les fichiers HTML et CSS / Sass). Maintenant, décomposons.
le bloc est le conteneur ou le contexte où l'élément se trouve. Considérez cela comme les plus gros morceaux structurels de votre code. Vous pourriez avoir un en-tête, un pied de page, une barre latérale et une zone de contenu principale; dont chacun serait considéré comme un bloc. Regardez l'image ci-dessous:
L'élément de bloc constitue la racine de la classe et ira toujours en premier. Sachez simplement qu'une fois que vous avez défini votre bloc, vous serez prêt à nommer vos éléments..
L'élément est le pièce d'un bloc. Le bloc est le tout et les éléments sont les pièces. Chaque élément est écrit après le bloc connecté par deux traits de soulignement.
.block__element
Je sais que cela semble un peu étrange, mais une fois que vous aurez commencé à l'utiliser, vous vous demanderez comment vous avez déjà écrit CSS sans elle! Le double trait de soulignement vous permet de naviguer et de manipuler votre code rapidement et visuellement.
Voici quelques exemples du fonctionnement de la méthodologie des éléments:
.header__logo .header__tagline .header__searchbar .header__navigation
Comme vous pouvez le constater, il y a de la place pour la créativité et l’utilisation de cette méthodologie. «Navigation» peut être remplacé par «nav», «tagline» par «tag» ou «tagLine». Le but est de garder les noms simples, clairs et précis. N'y pensez pas trop, et parce que vos feuilles de style et votre HTML resteront secs (ne vous répétez pas). Il ne devrait pas y avoir de problème pour mettre à jour les noms de classe lorsque vous trouvez une meilleure sémantique qui vous convient (essayez simplement de vous en tenir à cela!). Les éléments constitueront le noyau de vos noms de classe, vous aidant à comprendre comment structurer vos feuilles de style et comment gérer votre mise en page..
Maintenant, ça devient amusant (si vous ne vous amusiez pas déjà!) Lorsque vous nommez une classe, le but est d'aider à rendre cet élément reproductible afin que vous n'ayez pas à écrire de nouvelles classes dans d'autres zones du site si les éléments styles sont identiques. Lorsque vous avez besoin de modifier le style d'un élément spécifique, vous pouvez utiliser un modificateur (bien sûr!). Pour ce faire, vous ajoutez un double trait d'union. -- après l'élément (ou le bloc). Voici un petit exemple
.block - modificateur .block__element - modificateur
Soyez prudent avec ceux-ci! N'oubliez pas que vous voulez que tout reste simple et que vous n'ayez pas à vous répéter ni à créer des cours supplémentaires, sauf en cas de nécessité absolue. Parlons-en avec du code en utilisant l'en-tête du site comme bloc:
.header__navigation .header__navigation - secondaire
Si vous utilisez une navigation secondaire, il est probable que la disposition et l'espacement soient identiques, mais que la navigation secondaire est d'une couleur différente. Vous pouvez dupliquer les styles d'origine ou, mieux, utiliser un pré-processeur. Avec Sass, tu ferais @étendre l'élément principal (de sorte que l'élément secondaire hérite de toutes les propriétés) et modifie les styles appropriés.
.header__navigation background: # 008cba; rembourrage: 1rem 0; marge: 2rem 0; text-transform: majuscule; .header__navigation - secondaire @extend .header__navigation; arrière-plan: # dfe0e0;
Vous pensez peut-être «mais le nom de la classe est si long!», Comme je le vois: les noms de classe BEM sont spécifiques, clairs, faciles à lire en html et indiquent clairement leur fonction..
Ce que j’aime aussi des noms de classe BEM, c’est que vous ne devez utiliser qu’un seul nom de classe pour chaque balise HTML. Regardez comment cela pourrait fonctionner pour les étiquettes. Sélecteurs standard:
.label .label-default .label .label-alert
Sélecteurs BEM:
.label .label - alert
Des langages comme Sass (en particulier Scss) nous permettent d’avoir rapidement des éléments qui partagent les mêmes styles à quelques petites exceptions près. L'exemple ci-dessous nous empêche de dupliquer les styles, nous changeons simplement ce qui est nécessaire. Ce que j’aime tant dans la méthodologie BEM, c’est que je n’ai pas à combiner des cours ambigus comme “panneau panneau-défaut col-md-3” Si vous utilisez un cadre tel que Foundation, vous pouvez commencer à tirer parti des mixins. Mais pour un exemple simple, appelons ces lables que nous venons de définir.
.label background: #eee; rayon de bordure: 505; couleur: # 333; taille de police: 1rem; .label - alert @extend .label; arrière-plan: # da4531; couleur: #fff;
Eh bien voilà, BEM en un mot. Comme vous pouvez le constater, il reste encore beaucoup à explorer. BEM est un système en constante évolution qui vous permet de clarifier votre code et de vous aider à mieux définir et hiérarchiser votre développement frontal..
D'après mon expérience personnelle, cela m'a énormément aidé à construire des prototypes plus efficacement et à effectuer la transition au code de niveau de production encore plus rapidement.!
Que pensez-vous de BEM, avez-vous des conseils, des astuces ou des astuces pour vos collègues lecteurs de Tuts +? Faites-nous savoir dans les commentaires ci-dessous!
Accentsconagua