Quelle est la convention de dénomination CSS BEM ? Résumé des conventions de dénomination BEM (détaillé)

BEM est l'abréviation de bloc, élément et modificateur. C'est une convention de dénomination très utile. Cela peut rendre votre code frontal plus facile à comprendre et plus strict. Examinons ensuite la convention de dénomination spécifique à bem.

1 Quelle est la convention de dénomination BEM

Bem est l'abréviation de bloc, élément et modificateur, un terme proposé par l'équipe Yandex Une méthodologie de dénomination CSS frontale .

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.1 Modèle de dénomination BEM

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

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

• le 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.

L'utilisation de deux traits d'union et d'un trait de soulignement au lieu d'un permet de délimiter vos propres blocs par un seul trait d'union. Tels que :

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

1.2 Avantages de la nomenclature BEM

La clé de BEM est que vous pouvez obtenir plus Description et structure plus claire, la signification d'une certaine marque peut être connue à partir de son nom. 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 :

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

Cette façon d'écrire permet de comprendre la signification de chaque élément de la structure et de la classe du DOM la dénomination, mais sa véritable relation hiérarchique ne peut pas être clarifiée. 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.

Exemples utilisant la méthode de dénomination BEM :

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

Grâce à la méthode de dénomination BEM, la relation hiérarchique des modules est simple et claire, et l'écriture CSS est plus facile. Il n'est pas nécessaire de faire trop de choix de niveaux.

2 Comment utiliser la nomenclature BEM

2.1 Quand devez-vous utiliser le format BEM

L'astuce pour utiliser BEM est que vous Vous devez savoir quand et ce qui doit être écrit au format BEM.

Tout le monde ne devrait pas utiliser la dénomination BEM. Le format BEM doit être utilisé lorsque des relations de module explicites sont requises.

Par exemple, s'il ne s'agit que d'un style unique commun, cela ne sert à rien d'utiliser le format BEM :

.hide {
    display: none !important;
}

2.2 En CSS Utilisation du format BEM dans le préprocesseur

Un inconvénient de BEM est que 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;}
    }
}

2.3 Utilisation du format BEM dans les composants de frameworks populaires

Dans les frameworks front-end populaires actuels tels que Vue.js / React / Angular, il existe des implémentations de compilation de la portée au niveau des composants CSS. Le principe de base est d'utiliser la fonction de sélection d'attributs CSS pour sélectionner différents. Générez différents sélecteurs d’attributs.

Lorsque vous choisissez cette méthode d'écriture à portée locale, dans des composants plus petits, le format BEM peut ne pas être si important. 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.

2.4 Évitez le format .block__el1__el2

Dans les structures DOM profondément imbriquées, les définitions de noms de style trop longues doivent être évitées.

3 Résumé

L'une des parties les plus difficiles de BEM est de déterminer où commence et se termine un scope, et quand l'utiliser ou non. 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.

Recommandations associées :

Explication détaillée de la syntaxe BEM

[Anglais] Utilisez BEM pour modulariser votre code CSS_html /css_WEB -ITnez

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!