Qu'est-ce que BEM (Block, Element, Modifier) ​​et comment peut-il être utilisé avec Drupal Emulsify Twig

Publié: 2022-11-08

Lorsque vous travaillez avec des technologies et des logiciels open source, il est encore plus important de simplifier l'effort nécessaire pour lire et comprendre votre code. Une bonne convention de dénomination vous aide à résoudre des problèmes plus importants plutôt que de vous concentrer sur les préférences de syntaxe et de style lors des révisions de code. Les développeurs chevronnés comprennent l'importance d'un code bien écrit et organisé lorsqu'ils travaillent avec de plus grands sites Web avec des tonnes d'éléments de style.

La méthodologie BEM (Block, Element, Modifier) ​​est une convention de dénomination largement utilisée pour les classes CSS qui gagne en popularité en raison de la facilité d'utilisation qu'elle offre. Le concept fondamental de BEM est le développement Web basé sur des composants. BEM facilite et accélère le développement d'interfaces, en particulier lorsque vous gérez de grands projets avec une interface utilisateur complexe. Explorons plus en détail BEM et comment il peut fonctionner avec le module Drupal Emulsify Twig.

Qu'est-ce que le BEM

La méthodologie BEM a été introduite pour faciliter l'accès, la compréhension et la mise à l'échelle des classes CSS. Il peut accélérer le processus de développement et aide à créer des composants réutilisables.

BEM comprend trois parties :

  1. Bloquer
  2. Élément
  3. Modificateur

Bloquer

Les blocs sont le composant le plus externe et fonctionnellement indépendant et sont réutilisables. Exemples : en-tête, pied de page, barre latérale, menu, contenu, etc.

Traits:

  • Les noms de bloc doivent toujours refléter l'objectif du bloc.
  • Les blocs ne doivent pas utiliser de marge ou de position. Si vous devez ajouter une marge ou une position, vous devez l'appliquer aux conteneurs intérieurs.
  • N'utilisez pas de balises CSS ni de sélecteurs d'ID lorsque vous utilisez BEM.

Exemple:

 <div class=”icon-button”></div>

Élément

Les éléments sont des éléments enfants d'un bloc. Chaque élément ne peut avoir qu'un seul bloc et ne peut pas être utilisé en dehors de celui-ci. Exemples : éléments de menu, éléments de liste, champ de saisie, etc.

Traits:

  • Le nom de l'élément (classe) doit décrire son objectif (titre, légende) et non son état (petit/rouge).
  • L'élément et le bloc sont séparés par un double trait de soulignement (__). Comme ceci : nom-bloc__nom-élément.

Exemple:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element in the `icon-button` block → <div class=”icon-button__icon”>Icon Image</div> </div>

Modificateur

Un nom de classe grâce auquel vous pouvez définir l'apparence, l'état ou le comportement d'un bloc ou d'un élément. Exemples : rouge, grand, désactivé, fixe, etc.

Traits:

  • Le nom du modificateur décrit son apparence. Par exemple, si l'apparence est "_large", alors la classe de modificateur sera icon-button__title_large .
  • Le modificateur est séparé du bloc ou de l'élément par un seul trait de soulignement (_).

Exemple:

 <!-- `div` outer container as `icon-button` block → <div class=”icon-button”> <!-- `div` element with modifier in the `icon-button` block → <div class=”icon-button__icon_large”>Icon Image</div> </div>

Types de modificateurs

1. booléen

Vous pouvez vérifier la condition de la valeur booléenne et la définir dans une variable. Cette variable peut passer comme valeur de modificateur.

2. Valeur-clé

La structure du nom complet du modificateur avec la valeur-clé suivra l'un de ces modèles :

  1. nom-bloc_nom-modificateur_valeur-modificateur
  2. nom-bloc__nom-élément_nom-modificateur_valeur-modificateur

Conventions de dénomination : règles et schémas

Il existe différents schémas de nommage. Tous les régimes ont des règles communes telles que :

  • Les noms sont écrits en lettres latines minuscules.
  • Les mots sont séparés par un trait d'union (-).

1. Schémas de nommage classiques

Le schéma de nommage classique est le schéma de nommage par défaut de BEM.

Nom-bloc__elem-name_mod-name_mod-val

  • Le nom de l'élément et le nom du bloc sont séparés par un double trait de soulignement (__).
  • Le nom du modificateur et le nom du bloc ou de l'élément sont séparés par un seul trait de soulignement (_).
  • La valeur et le nom du modificateur sont séparés par un seul trait de soulignement (_).

2. Style de nommage à deux tirets

nom-bloc__nom-elem--nom-mod--mod-val

  • L'élément et le nom du bloc sont séparés par un double trait de soulignement (__).
  • Le bloc et l'élément sont séparés par un double trait d'union (--).
  • La valeur d'un modificateur et d'un modificateur sont séparés par un double tiret (--).

3. Style de dénomination CamelCase

blockName-elemName_modName_modVal

  • Chaque mot après le premier mot commence par une lettre majuscule.
  • Les blocs, les éléments et les modificateurs sont utilisés de la même manière que dans le schéma de nommage standard.

4. Style de nommage réactif

BlockName-ElemName_modName_modVal

  • Le nom du bloc et les noms des éléments commencent par une lettre majuscule.
  • Le nom du modificateur commence par une lettre minuscule.
  • Un nom d'élément et le nom du bloc sont séparés par un seul trait d'union (-).
  • Les noms et les valeurs des modificateurs sont séparés de la même manière que dans le schéma standard.

BEM dans Drupal avec le module Emulsify Twig

Dans Drupal, nous pouvons utiliser la fonction BEM Twig à l'aide du module Emulsify Twig. La fonction BEM vous permet de créer des classes BEM sur des éléments dans les composants. Vous trouverez ci-dessous quelques extensions BEM Twig et leur utilisation.

1. Nom de bloc simple (argument obligatoire) :

<div {{ bem('icon') }}>

Cela crée:

<div class="icon">

2. Bloquer avec des modificateurs :

Si vous souhaitez ajouter plusieurs modificateurs, vous pouvez le faire en utilisant un tableau.

<div {{ bem('icon', ['small', 'red']) }}>

Cela crée:

<div class="icon icône-–petite icône-–rouge">

3. Élément avec modificateurs et nom de bloc (facultatif) :

<div {{ bem('icon', ['small', 'red'], 'icon-button') }}>

Cela crée:

<div class="icon-button__icon icon-button__icon--small icon-button__icon--red">

4. Élément avec nom de bloc, mais sans modificateurs (facultatif) :

<div {{ bem('icon', '', 'icon-button') }}>

Cela crée:

<div class="icon-button__icon">

5. Élément avec nom de bloc, modificateurs et classes supplémentaires :

<div {{ bem('icon', ['small', 'red'], 'icon-button', ['js-click', 'something-else']) }}>

Cela crée:

<div class="icon-button__icon icon-button__icon--petite icône-bouton__icon--rouge js-cliquez sur autre chose">

6. Élément avec classes supplémentaires uniquement (facultatif) :

<div {{ bem('icon', '', '', ['js-click']) }}>

Cela crée:

<div class="icon js-clic">

Ajouter des attributs Twig Extension

La fonction Ajouter des attributs Twig vous permet d'ajouter des attributs HTML aux éléments de vos composants. Jetez un œil à certaines fonctions d'ajout d'attributs ci-dessous :

 {% set additional_attributes = { "class": ["icon-button", "icon-button__title"] } %} <div {{ add_attributes(additional_attributes) }} ></div> {% set additional_attributes = { "class": bem("icon", ["small", "red"], "icon-button"), } %} <div {{ add_attributes(additional_attributes) }}></div>

Dernières pensées

La méthodologie BEM est extrêmement utile aux développeurs qui souhaitent écrire et maintenir un code de meilleure qualité, facile à transmettre et à comprendre. Chaque élément a un but qui peut être facilement identifié par son nom et de quel bloc il provient. Lorsqu'il est utilisé correctement, vous verrez que l'utilisation de BEM peut accélérer la vitesse de développement. Si vous avez aimé ce que vous avez lu, inscrivez-vous à notre newsletter hebdomadaire où nous vous enverrons des informations fraîches et brûlantes directement dans votre boîte de réception !