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

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken

Artikel

Detaillierte Erläuterung der Apache-Website-Dienstkonfiguration basierend auf Linux

Detaillierte Erläuterung der CSS BEM-Schreibstandards

Zwei Möglichkeiten, damit IE6 Bilder im PNG-24-Format normal anzeigt

Rückgängigmachen der Anmeldung in MySQL

Ausführliche Erklärung der Sonderberechtigungen SUID, SGID und SBIT in Linux

Lösen Sie das Problem der Randzusammenführung

Verwenden Sie CSS, um zu verhindern, dass Lightbox die Anzeige des großen Bildcodes ohne Aktualisierung realisiert, wenn Sie auf ein kleines Bild klicken

Detaillierte Erläuterung der Apache-Website-Dienstkonfiguration basierend auf Linux

Angular Dependency Injection erklärt

So implementieren Sie das Strategiemuster in Javascript

Praktisches Beispiel für verschachtelte Routen im vue.js Router

Beim Zugriff auf die Homepage eines im Docker-Modus gestarteten Tomcat tritt ein 404-Fehler auf

Artikel empfehlen

Einführung in das MySQL Connection Control Plugin

MySQL-Grundlagen in 1 Stunde

Beispiel für die Verwendung von HTML+CSS zur Implementierung einer sekundären Menüleiste beim Bewegen der Maus

Lösung zur Verwendung von html2canvas zum Verarbeiten von Dom-Elementen mit Baidu-Map in Bilder

Beispielcode zum Installieren der ASPNET.Core3.0-Runtime unter Linux

MySQL Series II-Konfiguration für mehrere Instanzen

Implementierungscode für die teilweise Aktualisierung einer HTML-Seite

Browserübergreifender lokaler Speicher Ⅰ

So importieren Sie CSS-Stile in externe HTML-Stylesheets

Lösen Sie das Problem, dass await in forEach nicht funktioniert

Eine kurze Diskussion über das Blockieren von CSS-Zusammenführungen und andere Auswirkungen

Detaillierte Einführung in die Mysql-Datumsabfrage

Implementierung des Vue 3.x-Projekts basierend auf Vite2.x

Beschreibung der chinesischen Sortierregeln für MySQL

Wichtige Probleme und Lösungen zur Zugriffsgeschwindigkeit auf Webseiten