CSS Architecture Block-Element Modificateur (BEM) - SitePoint

BEM (modificateur d'éléments de blocs) est une méthodologie de développement frontal, une convention de dénomination et un ensemble d'outils associés. Originaire de Yandex, il est conçu pour un développement efficace par les grandes équipes. Cette explication se concentre sur le concept de base et le système de dénomination.

BEM favorise la visualisation des sites Web comme des collections de blocs de composants réutilisables, combinables pour créer des interfaces. Un bloc est une section de site Web (en-tête, pied de page, barre latérale, etc.), comme le montre la figure 2.3. Notez que "Block" ici fait référence aux segments de page HTML.

Figure 2.3. Une page d'accueil peut inclure des blocs d'en-tête, principaux et de pied de page.

Les blocs peuvent nicher. Par exemple, un bloc d'en-tête peut contenir le logo, la navigation et les blocs de formulaire de recherche (figure 2.4). Un pied de page peut contenir un bloc de sitemap.

Figure 2.4. Un bloc d'en-tête englobant les blocs de logo, de navigation et de recherche.

Les éléments sont plus granulaires que les blocs. Comme l'indique la documentation BEM: "Un élément fait partie d'un bloc qui remplit une fonction spécifique. Les éléments dépendent du contexte; ils n'ont du sens que dans leur bloc parent."

Un bloc de formulaire de recherche, par exemple, inclut un élément d'entrée de texte et un élément de bouton de soumettre (figure 2.5). Ici, "Element" fait référence aux éléments de conception, pas aux éléments HTML.

Figure 2.5. Un bloc de recherche avec entrée de texte et soumettre des éléments de bouton.

Un bloc de contenu principal peut contenir un bloc de liste d'articles, qui à son tour contient des blocs promotionnels d'articles. Chaque bloc promotionnel pourrait avoir des éléments d'image, d'extrait et de "lire plus" (figure 2.6).

Figure 2.6. Un bloc promotionnel pour un article de site Web.

Les blocs et les éléments forment le cœur de la convention de dénomination de BEM:

• Les noms de blocs doivent être uniques à l'échelle du projet.
• Les noms d'éléments doivent être uniques dans un bloc.
• Les variations de blocs (par exemple, une boîte de recherche sombre) utilisent les modificateurs dans le nom de classe.

Les noms de blocs et d'éléments sont séparés par deux soulignements (__). Les modificateurs sont séparés des noms de bloc / élément par deux tirets (--).

Voici un exemple de formulaire de recherche de style BEM:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

Une version sur le thème sombre:

<div class="search search--inverse">
  <div class="search__wrapper search__wrapper--inverse">
    <label for="s" class="search__label search__label--inverse">Search for:</label>
    <input type="text" id="s" class="search__input search__input--inverse" />
    <input type="submit" class="search__submit search__submit--inverse" value="Search" />
  </div>
</div>

CSS correspondant:

<div class="search">
  <div class="search__wrapper">
    <label for="s" class="search__label">Search for:</label>
    <input type="text" id="s" class="search__input" />
    <input type="submit" class="search__submit" value="Search" />
  </div>
</div>

dans le balisage et CSS, search--inverse et search__label--inverse sont des classes ajoutées , pas de remplacements. Seuls les sélecteurs de classe sont utilisés; Les sélecteurs d'enfants et de descendants sont autorisés mais doivent également cibler les classes. Les sélecteurs d'élément et d'ID sont évités. Cela maintient la spécificité du sélecteur faible, empêche les effets secondaires et rend le CSS indépendant des modèles de balisage. Les noms uniques de blocs et d'éléments empêchent les conflits de dénomination. Les avantages comprennent:

• Amélioration de la lisibilité et de la compréhension du code pour les nouveaux membres de l'équipe.
• accru la productivité de l'équipe.
• réduit les collisions de dénomination et les effets secondaires.
• CSS Indépendance du balisage.
• Réutilisabilité élevée du CSS.

La portée de Bem s'étend au-delà de cet aperçu. Le site officiel de BEM fournit des détails, des outils et des tutoriels complets. "Get BEM" est une autre excellente ressource pour la convention de dénomination.

(La section des questions fréquemment posées est omise car il s'agit d'une répétition d'informations déjà présentes et augmenterait considérablement la longueur de la sortie sans ajouter de nouveau contenu.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!