Quelle est la convention de dénomination BEM en CSS ?

Ce chapitre vous explique quelle est la convention de dénomination BEM en CSS ? , a une certaine valeur de référence, les amis dans le besoin peuvent s'y référer, j'espère que cela vous sera utile.

Qu'est-ce que la convention de dénomination BEM

Bem est l'abréviation de bloc, élément et modificateur. Il s'agit d'une méthodologie de dénomination CSS frontale proposée par l'équipe Yandex.

- trait de soulignement : utilisé uniquement comme trait d'union pour représenter une marque de connexion entre plusieurs mots d'un bloc ou d'un sous-élément.
__ Double soulignement : Le double soulignement est utilisé pour relier les blocs et les sous-éléments du bloc
_ Tiret de soulignement unique : Un trait de soulignement unique est utilisé pour décrire un état d'un bloc ou un sous-élément d'un bloc

BEM est une convention de dénomination simple et très utile. Rendez votre code front-end plus facile à lire et à comprendre, plus facile à collaborer, plus facile à contrôler, plus robuste et sans ambiguïté, et plus rigoureux.

1. Modèle de dénomination BEM

Le modèle de convention de dénomination BEM est :

.block {}
.block__element {}
.block--modifier {}

Chaque nom de bloc doit avoir un espace de noms (préfixe)
Bloc représente une abstraction ou un composant de niveau supérieur.
block__element représente les descendants de .block et est utilisé pour former un .block complet dans son ensemble.
block--modifier représente différents états ou différentes versions de .block

Utilisez deux traits d'union et traits de soulignement au lieu d'un afin que vos propres blocs puissent être délimités par un seul trait d'union. Tels que :

.sub-block__element {}
.sub-block--modifier {}

2. Avantages de la nomenclature BEM

La clé de BEM est que vous pouvez obtenir plus de descriptions et une structure plus claire. Vous pouvez connaître une certaine marque à partir de son nom. signification. Par conséquent, en examinant l’attribut class dans le code HTML, vous pouvez connaître la relation entre les éléments.

Exemple de nomenclature conventionnelle :

<div class="article">
    <div class="body">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

Cette façon d'écrire peut comprendre la signification de chaque élément à partir de la structure DOM et de la dénomination des classes, mais elle ne peut pas clarifier sa véritable relation hiérarchique. Lors de la définition de CSS, vous devez également vous appuyer sur des sélecteurs hiérarchiques pour limiter la portée des contraintes afin d'éviter la pollution de style entre composants.

Exemple d'utilisation de la méthode de dénomination BEM :

<div class="article">
    <div class="article__body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

Grâce à la méthode de dénomination BEM, la relation hiérarchique des modules est simple et claire, et il n'est pas nécessaire de faire trop de choix hiérarchiques lorsque écrire du CSS.

2. Comment utiliser la nomenclature BEM

1 Quand devez-vous utiliser le format BEM

L'astuce pour utiliser BEM. est , vous devez savoir quand et ce qui doit être écrit au format BEM. Tous les endroits ne devraient pas utiliser la dénomination BEM. Le format BEM doit être utilisé lorsque des relations de module explicites sont requises. Par exemple, s'il n'y a qu'un seul style public, cela ne sert à rien d'utiliser le format BEM :

.hide {    display: none !important;}

2 Utiliser le format BEM dans le préprocesseur CSS

Un inconvénient de. BEM, c'est ça, la méthode de dénomination est longue et moche, et l'écriture n'est pas élégante. Par rapport à la commodité apportée par le format BEM, nous devrions l’examiner objectivement. De plus, CSS est généralement écrit à l'aide de langages de préprocesseur tels que LESS/SASS, et il est beaucoup plus simple d'écrire en utilisant ses fonctionnalités de langage.

Prenons LESS comme exemple :

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

3 Utilisation du format BEM dans les composants de frameworks populaires
Dans les frameworks frontaux actuellement populaires tels que Vue.js / React / `Angular, il existe des implémentations de compilation de portée au niveau des composants CSS. Le principe de base est d'utiliser la fonction de sélection d'attributs CSS pour générer différents sélecteurs d'attributs pour différents composants. .
Lorsque vous choisissez cette approche de portée locale, le format BEM peut sembler moins important dans les composants plus petits. Cependant, pour les définitions de style de module publiques et globales, il est toujours recommandé d'utiliser le format BEM.
De plus, pour les composants publics diffusés vers le monde extérieur, généralement dans un souci de personnalisation du style, cette méthode de portée locale n'est pas utilisée pour définir les styles des composants. C’est là que l’utilisation du format BEM s’avérera également utile.

4 Évitez le format .block__el1__el2
DOM profondément imbriqué
structure, les définitions de noms de style trop longues doivent être évitées.
Le niveau final ne doit pas dépasser le niveau 4, sinon cela augmentera la difficulté de compréhension écrite

Résumé

L'un des. les parties les plus difficiles de BEM Il est clair où commence et se termine le scope, et quand l'utiliser ou ne pas l'utiliser. Au fur et à mesure que vous accumulerez de l'expérience avec une utilisation continue, vous saurez lentement comment l'utiliser, et ces problèmes ne seront plus un problème. Il n’y a pas de bonne ou de mauvaise technologie, seule la bonne est la meilleure.

Écriture et style recommandés

//常规写法：
.xxx{}
.xxx__item{}
.xxx__item_current{}

// 嵌套写法
.xxx__item_current .mod-xxx__link{}

推荐：
.xxx{}
.xxx__item{}
.xxx__item_hightlight{}
.xxx__product-name{}
.xxx__link{}
.xxx__ming-zi-ke-yi-hen-chang{}

// 嵌套写法
.xxx__item_current{
    .xxx__link{}
}

//对应的HTML结构如下：

<ul class="xxx">

	<li class="xxx__item">第一项

		<div class="xxx__product-name">我是名称</div>

		<span class="xxx__ming-zi-ke-yi-hen-chang">看类名</span>

		<a href="#" class="xxx__link">我是link</a>

	</li>

	<li class="xxx__item xxx__item_current">第二项 且 当前选择项

		<div class="xxx__product-name">我是名称</div>

		<a href="#" class="xxx__item-link">我是link</a>

	</li>

	<li class="xxx__item xxx__item_hightlight">第三项 且 特殊高亮

		<div class="xxx__product-name">我是名称</div>

		<a href="#" class="xxx__item-link">我是link</a>

	</li>
</ul>

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!