Was ist die CSS BEM-Namenskonvention? Zusammenfassung der BEM-Namenskonventionen (detailliert)

BEM ist die Abkürzung für Block, Element und Modifikator. Es ist eine sehr nützliche Namenskonvention. Dadurch kann Ihr Front-End-Code leichter verständlich und strenger werden. Schauen wir uns als Nächstes die spezifische Benennungskonvention für bem an.

1 Was ist die BEM-Namenskonvention?

Bem ist die Abkürzung für Block, Element und Modifikator, ein vom Yandex-Team vorgeschlagener Begriff. Eine Front-End-CSS-Benennungsmethode .

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 kontrollieren, robuster und eindeutiger und strenger.

1.1 BEM-Benennungsmuster

Das BEM-Benennungskonventionsmuster ist:

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

• 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 repräsentiert verschiedene Zustände oder verschiedene Versionen von .block.

Durch die Verwendung von zwei Bindestrichen und einem Unterstrich anstelle von einem können Ihre eigenen Blöcke durch einen einzelnen Bindestrich getrennt werden. Zum Beispiel:

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

1.2 Vorteile der BEM-Nomenklatur

Der Schlüssel zu BEM liegt darin, dass Sie mehr Beschreibungen erhalten können Und eine klarere Struktur: Die Bedeutung einer bestimmten Marke lässt sich anhand ihres Namens erkennen. Wenn Sie sich daher das Klassenattribut im HTML-Code ansehen, können Sie die Beziehung zwischen Elementen erkennen.

Beispiel für eine herkömmliche Nomenklatur:

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

Diese Schreibweise kann die Bedeutung jedes Elements aus der DOM-Struktur und der Klassenbenennung verstehen, aber es ist Die wahre hierarchische Beziehung kann nicht geklärt werden. 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:

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

Durch die BEM-Benennungsmethode ist die hierarchische Beziehung der Module einfach und klar, und es besteht keine Notwendigkeit CSS schreiben Zu viele Level-Entscheidungen treffen.

2 So verwenden Sie die BEM-Nomenklatur

2.1 Wann sollten Sie das BEM-Format verwenden

Der Trick bei der Verwendung von BEM ist folgender Sie müssen wissen, wann und was im BEM-Format geschrieben werden soll.

Nicht jeder sollte die BEM-Benennung verwenden. Das BEM-Format sollte verwendet werden, wenn explizite Modulbeziehungen erforderlich sind.

Wenn es sich beispielsweise nur um einen gemeinsamen Einzelstil handelt, macht es keinen Sinn, das BEM-Format zu verwenden:

.hide {
    display: none !important;
}

2.2 Bei der CSS-Vorverarbeitung Verwendung des BEM-Formats

Ein Nachteil von BEM besteht darin, dass die Benennungsmethode lang und hässlich ist und die Schreibweise nicht elegant ist. 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;}
    }
}

2.3 Verwendung des BEM-Formats in Komponenten beliebter Frameworks

In den derzeit gängigen Front-End-Frameworks wie Vue.js / React / Angular gibt es Kompilierungsimplementierungen für den CSS-Bereich auf Komponentenebene. Das Grundprinzip besteht darin, die CSS-Attributauswahlfunktion zum Generieren verschiedener Komponenten zu verwenden verschiedene Attributselektoren.

Wenn Sie diese Schreibmethode für den lokalen Bereich wählen, ist das BEM-Format in kleineren Komponenten möglicherweise nicht so wichtig. 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.

2.4 Vermeiden Sie das .block__el1__el2-Format

In tief verschachtelten DOM-Strukturen sollten zu lange Stilnamendefinitionen vermieden werden.

3 Zusammenfassung

Einer der schwierigsten Teile von BEM besteht darin, herauszufinden, wo ein Bereich 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.

Verwandte Empfehlungen:

Detaillierte Erläuterung der BEM-Syntax

[Englisch] Verwenden Sie BEM, um Ihren CSS-Code_html /css_WEB zu modularisieren -ITnose

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