Einführung in den CSS BEM-Benennungsstandard (empfohlen)

1 Was ist der BEM-Namensstandard

Bem ist die Abkürzung für Block, Element, Modifier und ist eine vom Yandex-Team vorgeschlagene Front-End-CSS-Benennungsmethode.

BEM ist eine einfache, aber sehr nützliche Namenskonvention. Sorgen Sie dafür, dass Ihr Front-End-Code leichter lesbar und verständlich ist, dass er leichter zusammenzuarbeiten, leichter zu steuern, robuster und expliziter ist und präziser.

1.1 BEM-Benennungsmuster

Das Muster für die BEM-Benennungskonvention lautet:

.block {}
.block__element {}
.block--Modifikator {}

• Blöcke stellen Abstraktionen oder Komponenten höherer Ebene dar.
• block__element stellt die Nachkommen von .block dar und wird verwendet, um als Ganzes einen vollständigen .block zu bilden.
• Block-Modifikator repräsentiert verschiedene Zustände oder Versionen von .block.

Der Grund für die Verwendung von zwei Bindestrichen und Unterstrichen anstelle von nur einem besteht darin, dass Sie Ihre eigenen Blöcke mit einem einzigen Bindestrich definieren können. wie:

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

1.2 Vorteile der BEM-Nomenklatur

Der Schlüssel zu BEM liegt darin, dass Sie mehr Beschreibungen und eine klarere Struktur erhalten und die Bedeutung eines Tags anhand seines Namens erkennen können. Daher können Sie durch Betrachten der Klassenattribute im HTML-Code die Beziehung zwischen Elementen erkennen.

Beispiele für gängige Nomenklatur:

<div Klasse="Artikel">
    <div Klasse="Körper">
        <button class="button-primary"></button>
        <button class="button-success"></button>
    </div>
</div>

Mit dieser Schreibmethode lässt sich die Bedeutung jedes Elements aus der DOM-Struktur und der Klassenbenennung verstehen, die tatsächliche hierarchische Beziehung kann jedoch nicht geklärt werden. Beim Definieren von CSS müssen Sie sich auch auf hierarchische Selektoren verlassen, um den Umfang der Einschränkungen zu begrenzen und so eine komponentenübergreifende Stilverschmutzung zu vermeiden.

Beispiel mit der BEM-Benennungsmethode:

<div Klasse="Artikel">
    <div Klasse="Artikel__Body">
        <div class="tag"></div>
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

Durch die BEM-Benennungsmethode ist die Modulhierarchiebeziehung einfach und klar, und beim Schreiben von CSS müssen nicht zu viele hierarchische Entscheidungen getroffen werden.

2 Verwendung der BEM-Nomenklatur

2.1 Wann sollten Sie BEM einsetzen?

Der Trick bei der Verwendung von BEM besteht darin, zu wissen, wann und was im BEM-Format geschrieben werden sollte.

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

Wenn es sich beispielsweise nur um ein einziges öffentliches Stylesheet handelt, ist die Verwendung des BEM-Formats sinnlos:

.verstecken {
    Anzeige: keine !wichtig;
}

2.2 Verwenden des BEM-Formats in CSS-Präprozessoren

Eine Beschwerde über BEM besteht darin, dass die Benennungsmethode lang, hässlich und unelegant zu schreiben ist. Verglichen mit dem Komfort, den das BEM-Format bietet, sollten wir es objektiv betrachten.

Darüber hinaus wird CSS im Allgemeinen mithilfe von Präprozessorsprachen wie LESS/SASS geschrieben, was das Schreiben mithilfe der Sprachfunktionen erheblich erleichtert.

Nehmen wir LESS als Beispiel:

.Artikel {
    maximale Breite: 1200px;

    &__Körper {
        Polsterung: 20px;
    }

    &__Taste {
        Polsterung: 5px 8px;

        &--primary {Hintergrund: blau;}
        &--Erfolg {Hintergrund: grün;}
    }
}

2.3 Verwenden des BEM-Formats in Komponenten beliebter Frameworks

In den derzeit beliebten Front-End-Frameworks wie Vue.js/React/Angular gibt es Kompilierungsimplementierungen mit CSS-Komponentenebene. Das Grundprinzip besteht darin, die CSS-Attributauswahlfunktion zu verwenden, um unterschiedliche Attributauswahlen für unterschiedliche Komponenten zu generieren.

Wenn Sie diesen Ansatz mit lokalem Geltungsbereich wählen, ist die BEM-Formatierung in kleineren Komponenten möglicherweise nicht so wichtig. Für öffentliche, globale Modulstildefinitionen wird jedoch die Verwendung des BEM-Formats empfohlen.

Darüber hinaus wird diese Methode mit lokalem Gültigkeitsbereich bei öffentlichen Komponenten, die nach außen freigegeben werden, im Allgemeinen nicht zum Definieren von Komponentenstilen verwendet, um die Stilanpassbarkeit zu gewährleisten. Auch hier ist die Verwendung des BEM-Formats praktisch.

2.4 Vermeiden Sie das Format .block__el1__el2

Vermeiden Sie in tief verschachtelten DOM-Strukturen die Definition sehr langer Stilnamen.

3 Fazit

Einer der schwierigsten Aspekte von BEM besteht darin, herauszufinden, wo der Umfang beginnt und endet und wann er genutzt werden soll und wann nicht. Mit zunehmender Erfahrung werden Sie den Umgang damit nach und nach erlernen und diese Probleme werden kein Problem mehr darstellen. Es gibt keine gute oder schlechte Technologie. Die am besten geeignete ist die beste.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.