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:
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.
Element Das Element ist ein Teil des Blocks und hat keine unabhängige Existenz. Jedes Element ist semantisch an einen Block gebunden. Merkmale:
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. |
>>: JavaScript-Sandbox-Erkundung
Artikel empfehlen
Mehrere Möglichkeiten für Vue, die Kommunikation zwischen Komponenten zu erreichen (mehrere Szenarien)
Inhaltsverzeichnis 1. Requisiten Übergeordnetes E...
So wechseln Sie zwischen Vue-Produktions- und Entwicklungsumgebungen und verwenden Filter
Inhaltsverzeichnis 1. Wechseln Sie zwischen Produ...
Im Vorstellungsgespräch wurde ich gefragt, ob select...for update die Tabelle oder die Zeile sperren würde.
Inhaltsverzeichnis verifizieren: Kombiniert mit d...
Lösen Sie das Problem des Startfehlers von PHPStudy MySQL unter Windows
Einen Fehler melden Der Apache\Nginx-Dienst wurde...
Haben Sie die MySQL-Verbindungsabfrage wirklich gelernt?
1. Übersicht über Inner Join-Abfragen Der Inner J...
Analyse des Linux-Hochleistungsnetzwerk-IO- und Reaktormodells
Inhaltsverzeichnis 1. Einführung in grundlegende ...
Linux-Unlink-Funktion und wie man Dateien löscht
1. Unlink-Funktion Bei Hardlinks wird mit „unlink...
Tipps zum Gestalten der Fotovorschau-Navigation auf Webseiten
<br />Navigation bezieht sich nicht nur auf ...
Einführung in die Vue-Grundlagen: Installation und Verwendung von Vuex
Inhaltsverzeichnis 1. Was ist vuex 2. Installatio...
Erklärung der CAST- und CONVERT-Funktionen zur Typkonvertierung in MySQL-Datenbanken
Mit den MySQL-Funktionen CAST() und CONVERT() kön...
Zusammenfassung der Methode von React zum Erstellen von Komponenten
Inhaltsverzeichnis 1. Komponenten mit Funktionen ...
Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL
Vorwort Aus beruflichen Gründen musste ich kürzli...
mysql bestimmt, ob die aktuelle Zeit zwischen der Start- und Endzeit liegt und ob die Start- und Endzeit leer sein dürfen
Inhaltsverzeichnis Anforderung: Abfrage laufender...
So aktualisieren Sie Ubuntu 20.04 LTS unter Windows 10
23. April 2020: Heute können Sie mit Ubuntu 20.04...
Detaillierte Erläuterung des SVN-Ein-Klick-Installations-Shell-Skripts unter Linux
#!/bin/bash #SVN herunterladen yum -y installiere...