Detaillierte Erläuterung der CSS BEM-Schreibstandards

BEM ist ein komponentenbasierter Ansatz zur Webentwicklung. Die Idee besteht darin, die Benutzeroberfläche in unabhängige Blöcke zu unterteilen, wodurch die Entwicklung komplexer Benutzeroberflächen einfacher und schneller wird und vorhandener Code ohne Kopieren und Einfügen wiederverwendet werden kann. BEM besteht aus Block, Element und Modifikator. Um die Beziehung zwischen den Elementen zu erweitern, werden im Selektor folgende Konnektoren verwendet:

`__: Doppelte Unterstriche werden verwendet, um Blöcke und ihre Unterelemente zu verbinden
` : wird nur als Bindestrich verwendet, um mehrere Wörter eines Blocks oder Elements oder Modifikators zu verbinden (kann auch direkt in Camel Case geschrieben werden)
--: Doppelte Bindestriche werden verwendet, um die Zustände von Blöcken oder Elementen zu verbinden (einfache Unterstriche können ebenfalls verwendet werden)

Beispiel:

Blockname_Modifikatorname
Blockname__Elementname-Modifikatorname
Blockname_Modifikatorname - Modifikatorwert
Blockname__Elementname--Modifikatorname--Modifikatorwert

Grundlegende Konzepte

Block

Der Codeausschnitt kann wiederverwendet werden und dieser Code ist nicht von anderen Komponenten abhängig, d. h., Block kann verwendet werden. Blöcke können beliebig tief ineinander verschachtelt werden.
Merkmale:

Der Name eines Blocks beschreibt seinen Zweck. Wie Menü, Schaltfläche
Blöcke können ihre Umgebung nicht beeinflussen. Dies bedeutet, dass Sie für Blöcke weder Ränder noch Positionen festlegen können.
Es können nur Klassennamen-Selektoren verwendet werden, keine Tag- oder ID-Selektoren.
Ist nicht von anderen Blöcken oder Elementen auf der Seite abhängig

Element

Das Element ist ein Teil des Blocks und hat keine unabhängige Existenz. Jedes Element ist semantisch an einen Block gebunden.

Merkmale:

Verwenden Sie „__“, um eine Verbindung mit dem Block herzustellen. Wie zum Beispiel: block__item
Wird verwendet, um seinen Zweck zu beschreiben. Wie zum Beispiel: Artikel, Text
Elemente können bis zu einer beliebigen Ebene ineinander verschachtelt werden.
Elemente sind immer Teil eines Blocks. Daher ist eine Benennung wie block__item1__item2 unzulässig.

Modifikator

Modifikator ist ein Tag auf einem Block oder Element. Verwenden Sie sie, um Stil, Verhalten oder Status zu ändern. Der Konnektor für Blöcke oder Elemente ist '--'.

Anwendung

Positionierung eines Blocks relativ zu anderen Blöcken

Der beste Ansatz besteht darin, eine Mischung aus Blöcken und Elementen zu verwenden. Lösen Sie das Problem, dass Rand und Position für den Block nicht festgelegt werden können.

Beispiel:

<body class="Seite">
    <!-- Kopfzeile und Navigation-->
    <header class="header page__header">...</header>

    <!-- Fußzeile -->
    <footer class="footer page__footer">...</footer>
</body>
.page__header {
    Polsterung: 20px;
}

.page__footer {
    Polsterung: 50px;
}

Positionierung von Elementen innerhalb eines Blocks

Die Verschachtelung wird durch die Erstellung zusätzlicher untergeordneter Blockelemente erreicht.

Beispiel:

<body class="Seite">
    <div Klasse="page__inner">
      <!-- Kopfzeile und Navigation-->
      <header class="header">...</header>

      <!-- Fußzeile -->
      <footer class="footer">...</footer>
    </div>
</body>
.page__inner {
    Rand rechts: automatisch;
    Rand links: automatisch;
    Breite: 960px;
}

Über die Namensgebung

Selektornamen müssen die BEM-Entität, die sie darstellen, vollständig und genau beschreiben.

Beispiel:

.Taste {}
.button__icon {}
.button__text {}
.button_theme_islands {}

Wir können direkt anweisen, dass es sich um ein Blockelement handelt. Verwenden Sie es in HTML wie:

<button Klasse="button button_theme_inseln">
    <span class="button__icon"></span>

    <span class="button__text">…</span>
</button>

Das folgende CSS macht es uns schwer, dieselbe Beurteilung vorzunehmen:

.Taste {}
.Symbol {}
.text {}
.theme_islands {}

Ich habe die BEM-Spezifikation in mein Git-Projekt miniui übernommen und BEM mit Sass implementiert. Wenn Sie interessiert sind, können Sie es sich ansehen: https://github.com/banyaner/miniui

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.

<<: Installieren von Alibaba Cloud Server mit Docker und die Fallstricke bei der Installation in einer virtuellen Maschine (Zusammenfassung der Probleme)

>>: JavaScript-Sandbox-Erkundung

Über die Konvertierung von Textbereichstext in HTML, d. h. Wagenrücklauf und Zeilenumbruch

Installations- und Konfigurationsdetails zur Synchronisierung der MySQL5.6.33-Datenbank Master/Slave (Master/Slave) (Master-Linux Slave-Windows7)

Artikel

Detaillierte Erläuterung der Linux-Textverarbeitungstools

Detaillierte Erläuterung der CSS BEM-Schreibstandards

Über die Konvertierung von Textbereichstext in HTML, d. h. Wagenrücklauf und Zeilenumbruch

So berechnen Sie die Bildrate FPS von Webanimationen

React-Diagramm Serialisierung JSON Interpretation Fallanalyse

Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.13

Zusammenfassung der 3 kleineren Fehler, die während der Installation von MySQL 8.0 aufgetreten sind

Mysql-Sortierung und Paginierung (Order by & Limit) und vorhandene Fallstricke

Installations- und Konfigurationsdetails zur Synchronisierung der MySQL5.6.33-Datenbank Master/Slave (Master/Slave) (Master-Linux Slave-Windows7)

Detaillierte Erläuterung der Linux-Textverarbeitungstools

Beispielcode zur Implementierung der Google-Anmeldung über Drittanbieter in Vue

MySQL 8.X Installations-Tutorial unter Windows

Artikel empfehlen

Verwendung von Markierungs-Tags im CSS-Listenmodell

So entschlüsseln Sie Linux-Versionsinformationen

TortoiseSvn Little Turtle Installation Neuestes ausführliches Grafik-Tutorial

Die Eltern-Kind-Knoten-Zuordnung des El-Tree-Mehrfachauswahlbaums (Kontrollkästchen) des Elements ist nicht zugeordnet

Reines CSS zum Anpassen der Div-Höhe entsprechend der adaptiven Breite (Prozentsatz)

So lösen Sie das Problem zu vieler geöffneter Dateien in Linux

Detaillierte Schritte zur Installation von MySQL 8.0.18-winx64 unter Win10

jQuery-Plugin zum Erreichen einer Bildunterbrechung

Abkürzung für HTML DOCTYPE

Beispielcode zum gleichmäßigen Verteilen von Elementen mithilfe des CSS3-Flex-Layouts

Detailliertes Beispiel für die Verwendung von MySQL-Triggern

So verwenden Sie eine Karte, um die domänenübergreifende Nutzung mehrerer Domänennamen in Nginx zu ermöglichen

Lösung für den Fehler von MySQL, innobackupex zum Sichern des Verbindungsservers zu verwenden

Tutorial zur Installation und Kennwortkonfiguration von MySQL 5.7.21

Klassischer Beispielcode für JavaScript-Funktionsaufrufe