Was ist die BEM-Namenskonvention in CSS?

In diesem Kapitel erfahren Sie, was die BEM-Namenskonvention in CSS ist. , hat einen bestimmten Referenzwert, Freunde in Not können sich darauf beziehen, ich hoffe, es wird Ihnen hilfreich sein.

Was ist die BEM-Namenskonvention?

Bem ist die Abkürzung für Block, Element und Modifikator. Es handelt sich um eine vom Yandex-Team vorgeschlagene Front-End-CSS-Benennungsmethode.

– Unterstrich: Wird nur als Bindestrich verwendet, um ein Verbindungszeichen zwischen mehreren Wörtern eines Blocks oder eines Unterelements darzustellen.
__Doppelte Unterstreichung: Doppelte Unterstreichung wird verwendet, um Blöcke und Unterelemente des Blocks
zu verbinden _ Einzelner Unterstrich: Ein einzelner Unterstrich wird verwendet, um einen Zustand eines Blocks oder eines Unterelements eines Blocks zu beschreiben

BEM ist eine einfache und sehr nützliche Namenskonvention. Machen Sie Ihren Front-End-Code leichter lesbar und verständlich, einfacher mit ihm zusammenzuarbeiten, einfacher zu steuern, robuster und eindeutiger sowie strenger.

1. BEM-Namensmuster

Das BEM-Namenskonventionsmuster ist:

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

Jeder Blockname (Blockname) sollte einen Namensraum (Präfix) haben
Block stellt eine Abstraktion oder Komponente einer höheren Ebene dar.
block__element stellt die Nachkommen von .block dar und wird verwendet, um einen vollständigen .block als Ganzes zu bilden.
block--modifikator stellt verschiedene Zustände oder verschiedene Versionen von .block dar

Verwenden Sie zwei Bindestriche und Unterstriche anstelle von einem, damit Ihre eigenen Blöcke mit einem einzigen Bindestrich getrennt werden können. Zum Beispiel:

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

2. Vorteile der BEM-Nomenklatur

Der Schlüssel zu BEM besteht darin, dass Sie mehr Beschreibungen und eine klarere Struktur erhalten und die Bedeutung einer bestimmten Marke anhand ihrer erkennen können Name. Wenn Sie sich daher das Klassenattribut im HTML-Code ansehen, können Sie die Beziehung zwischen Elementen erkennen.

Beispiel für eine konventionelle Nomenklatur:

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

Diese Schreibweise kann die Bedeutung jedes Elements aus der DOM-Struktur und der Klassenbenennung verstehen, aber seine wahre hierarchische Beziehung nicht klären. Beim Definieren von CSS müssen Sie sich auch auf hierarchische Selektoren verlassen, um den Einschränkungsbereich einzuschränken und eine komponentenübergreifende Stilverschmutzung zu vermeiden.

Beispiel für die Verwendung der BEM-Benennungsmethode:

<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>

Mit der BEM-Benennungsmethode ist die hierarchische Beziehung der Module einfach und klar, und es besteht keine Notwendigkeit, beim Schreiben von CSS zu viele hierarchische Entscheidungen zu treffen .

2. So verwenden Sie die BEM-Nomenklatur

Wann sollten Sie das BEM-Format verwenden

Der Trick bei der Verwendung von BEM Das heißt, Sie müssen wissen, wann und was im BEM-Format geschrieben werden soll. Nicht jeder Ort sollte die BEM-Benennung verwenden. Das BEM-Format sollte verwendet werden, wenn explizite Modulbeziehungen erforderlich sind. Wenn es beispielsweise nur einen einzigen öffentlichen Stil gibt, macht es keinen Sinn, das BEM-Format zu verwenden:

.hide {    display: none !important;}

2. Die Verwendung des BEM-Formats im CSS-Präprozessor

Ein Nachteil von BEM ist Die Benennungsmethode ist lang, hässlich und schlecht geschrieben. Verglichen mit der Bequemlichkeit, die das BEM-Format mit sich bringt, sollten wir es objektiv betrachten. Darüber hinaus wird CSS im Allgemeinen mit Präprozessorsprachen wie LESS/SASS geschrieben und ist mit seinen Sprachfunktionen viel einfacher zu schreiben.

Nehmen Sie LESS als Beispiel:

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

3 Verwendung des BEM-Formats in Komponenten beliebter Frameworks
In den derzeit beliebten Front-End-Frameworks wie Vue.js / React / `Angular gibt es Kompilierungsimplementierungen des CSS-Bereichs auf Komponentenebene. Das Grundprinzip besteht darin, die CSS-Attributauswahlfunktion zu verwenden, um verschiedene Attributselektoren für verschiedene Komponenten zu generieren. .
Wenn Sie diesen lokalen Bereichsansatz wählen, scheint das BEM-Format in kleineren Komponenten möglicherweise weniger wichtig zu sein. Für öffentliche und globale Modulstildefinitionen wird jedoch weiterhin die Verwendung des BEM-Formats empfohlen.
Darüber hinaus wird diese lokale Bereichsmethode für öffentliche Komponenten, die für die Außenwelt freigegeben werden, im Allgemeinen aus Gründen der Stilanpassung nicht zum Definieren von Komponentenstilen verwendet. Auch hier bietet sich die Verwendung des BEM-Formats an.

4 Vermeiden Sie das Format .block__el1__el2
Tief verschachteltes DOM
Struktur sollten zu lange Definitionen von Stilnamen vermieden werden.
Die Abschlussstufe sollte Stufe 4 nicht überschreiten, sonst erhöht sich die Schwierigkeit des Leseverständnisses

3 Zusammenfassung

Einer von Die schwierigsten Teile von BEM. Es ist klar, wo der Anwendungsbereich beginnt und endet und wann er verwendet werden sollte oder nicht. Mit der Ansammlung kontinuierlicher Nutzungserfahrung werden Sie langsam wissen, wie man es verwendet, und diese Probleme werden kein Problem mehr darstellen. Es gibt keine gute oder schlechte Technologie, nur die richtige ist die beste.

Empfohlener Schreibstil und empfohlener Stil

//常规写法：
.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>

Das obige ist der detaillierte Inhalt vonWas ist die BEM-Namenskonvention in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!