Grüße. In diesem Artikel werde ich Ihnen erklären, wie Sie BEM ändern, die besten Funktionen beibehalten und die schlechtesten entfernen können.
Lassen Sie uns zunächst darüber sprechen, was mit BEM nicht stimmt. Vielleicht muss nichts geändert werden und alles ist so gut?
BEM ist eine Methode, mit der Sie CSS / HTML / JS häufig verwenden können. Sie führt die Konzepte von Block, Element, Modifikator und Mix ein. Wenn Sie anfangen, es zu benutzen, verstehen Sie, dass dies genau das ist, worauf Sie viele Jahre gewartet haben. Es ist so bequem, klar und schön! Aber nach einiger Zeit beginnen solche Momente in der Entwicklung aufzutreten, die mit Hilfe von BEM gelöst werden können, aber dies bringt weder Vergnügen noch, was am wichtigsten ist, Vorteile. Worüber rede ich? Lassen Sie uns diese Punkte durchgehen:
1. Einwegblöcke und Gegenstände
Dieses Problem hat mich so sehr gestört, dass ich gezwungen war, diesen Artikel zu schreiben.
Das Konzept eines Blocks impliziert eine Entität, die wiederverwendet werden kann und sollte. In der Praxis wird jedoch eine große Anzahl von Blöcken erstellt, die einmal angewendet werden.
Zum Beispiel müssen wir Folgendes tun: Platzieren Sie eine Überschrift auf der Seite, gefolgt von einem Textfeld und einer Senden-Schaltfläche, wie in der Abbildung gezeigt:
Was werden wir laut BEM tun? Es gibt mehrere Möglichkeiten:
- Erstellen Sie einen Formularblock und seine Elemente: Titel, Schaltfläche, Textfeld
- Erstellen Sie separate Blöcke für jede der Komponenten (Schaltfläche, Textfeld, Titel) sowie für das Formular
- ...
Was auch immer wir wählen, wir werden ein Problem haben: Wie kann man den Einzug zwischen all diesen Blöcken setzen?
Wenn wir die erste Option gewählt haben, können wir uns entscheiden, die Elemente des Formulars einzurücken, da dies nicht der Methodik widerspricht. In diesem Fall zerstören wir jedoch die Essenz des Blocks: Er kann nicht wiederverwendet werden, da sein internes Markup nur der aktuellen Situation entspricht.
Wenn wir die zweite Option wählen würden, wäre es möglich, einen Block mit dem Formular zu mischen und die Elemente dieses Blocks mit den Komponenten des Formulars zu mischen. Stellen Sie dementsprechend für die Elemente des gerade erstellten Blocks den Einzug ein. Und hier tritt das Problem der einmaligen Blöcke auf: Sie werden nur an einem Ort verwendet! Sie können nicht mehr verwendet werden, da sich die Komponenten auf anderen Seiten anders befinden.
Dieses Problem führt zu einmaligen Blöcken / Elementen sowie zu Modifikatoren vom Typ
___size_ oder
___place_---- (zum Festlegen der Einrückung), die, wie bereits erwähnt, einmal verwendet werden und sowohl Markup-Dateien als auch das Projekt mit eigenen Verzeichnissen
___place_---- und Dateien.
Gleiches gilt nicht nur für Einrückungen, sondern auch für Blockgrößen (bei Schaltflächen führt dies beispielsweise häufig zu einer Änderung
line-height ), Schriftgrößen, Einrückungen usw.
2. Lange Klassennamen
Es gibt nicht einmal viel zu erzählen. Ich glaube nicht, dass irgendjemand das Markup mag, das ungefähr so aussieht:
<header class="section-header section-header_margin_select-sector"> <h2 class="section-header__title font font_face_calibri-bold section-header__title_size_select-sectors"> Select a sector, please: </h2> </header>
3. Standardwerte oder Blockthemen
Angenommen, wir haben einen Tastenblock. Sie müssen es gemäß den Anforderungen des Designs stilisieren. In einem anderen Projekt wird es aber auch eine Button-Klasse geben. Es wird anders aussehen, aber einige der Stile werden gleich sein. Was empfiehlt BEM? Er sagt, er soll einen Theme-Modifikator erstellen und ihn auf alle erforderlichen Elemente einstellen.
Bei diesem Ansatz wird sich jedoch Folgendes herausstellen:
<input type="text" class="textbox textbox_theme_P2"> <button class="button button_theme_P2">Reset</button> <button class="button button_theme_P2">Submit</button> <button class="button button_theme_P2">Save as draft</button>
Dies ist eine Unordnung von Code, und es ist schlecht.
Sie kritisieren - Angebot
Was schlage ich vor, um diese Schande zu korrigieren? Ich schlage das folgende Manifest vor, das im Wesentlichen ein Add-On zum Standard-BEM ist.
Manifest - Verbessertes BEM
A.1 Modulschicht und Seitenschicht
Ich schlage vor, den Stil in zwei Teile zu teilen:
Der erste Teil ist die Komponentenschicht. Dieser Teil wurde in Übereinstimmung mit allen (fast *) BEM-Regeln geschrieben. Es legt Stile für wiederverwendbare Blöcke oder vielmehr Komponenten fest, z. B. für eine Schaltfläche, ein Textfeld, einen Titel usw.
Der andere Teil ist die Seitenebene. Es ist erforderlich, die Stile von Blöcken und Elementen einer bestimmten Seite festzulegen. Dementsprechend werden diese Blöcke / Elemente einmal verwendet (auf jeden Fall auf einer Seite). BEM-Regeln gelten hier nicht. Es sieht so aus:
Datei:
index.css .___send-button { margin-bottom: 2px; font-size: 13px; } .___message-textarea { width: 240px; height: 300px; font-size: 14px; }
Der Name der Seitenlayoutdatei ist optional. Die Hauptsache ist, dass es dem Wesen der Seite entspricht. Alle Stile beginnen mit '___', damit sie nicht mit den Standard-BEM-Entitätsklassen verwechselt werden können. Außerdem sind Klassen nicht an BEM-Entitäten gebunden - ihre Namen geben nur an, worauf sie angewendet werden sollen. Es ist auch erwähnenswert, dass sich alle Stile des Seitenlayouts in einer Datei befinden, da sie sich auf eine Seite beziehen.
Diese Trennung ermöglicht es uns, das erste Problem unbeschadet des Hauptziels von BEM zu lösen - Stile / Markups zu erstellen, damit sie wiederverwendet werden können. Diese Stile werden nur auf einer Seite angewendet und beeinträchtigen in keiner Weise die Stile von Komponenten aus dem Komponentenlayout. Auf diese Weise werden einmalige Klassen entfernt, während die Möglichkeit erhalten bleibt, Blöcke wiederzuverwenden, ohne den Umfang zu verletzen.
Es ist auch sinnvoll, Komponenten und Seitenlayouts auf Verzeichnisebene zu trennen.
* mit Ausnahme der Regeln, die durch die folgenden Absätze des Manifests aufgehoben werden.A.2 Lange Klassennamen
(Experimenteller, daher optionaler Punkt *)
Es wird vorgeschlagen, einen Teil des Standardbenennungssystems durch Folgendes zu ersetzen:
Für Block:
class="" (keine Änderung)
Für einen Block mit einem Modifikator:
class=" _" (Zugriff über den kombinierten Selektor.
.._ )
Für ein Element:
class="__" (keine Änderung)
Für ein Element mit einem Modifikator:
class="__ _" (Zugriff über
.__._ )
Mit diesem Element können Sie einen Funktionscode für Modifikatoren abrufen. Offensichtlich kann das nicht mit Elementen gemacht werden.
Es ist wichtig, dass für Dateien mit Stilen keine Regeln für Selektoren definiert sind, die nur aus Modifikatoren bestehen:
._active { background-color: #abcdef; }
* Eine ähnliche Benennung von Modifikatoren kann zu Problemen bei Blöcken / Elementen führen, die mit anderen Blöcken / Elementen gemischt sind, vorausgesetzt, beide Entitäten können denselben Modifikator haben. Das heißt, indem wir einen Modifikator für eine Entität festlegen, legen wir ihn für alle fest, die mit diesem Knoten gemischt sind.A.3 Standardeinstellungen und Themen
Hier ist alles einfach. Es wird vorgeschlagen, ein Standardthema auszuwählen, aber Stile dafür nicht in der Blockklasse vorzuschreiben, die sich in der Blockdatei befindet, sondern in der Blockklasse, die in der Themendatei platziert werden soll. Zum Beispiel:
Datei -
button/button.css .button { cursor: pointer; display: inline-block; }
Datei -
button/_theme/button_theme_P2.css .button_theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }
Oder gemäß Absatz 2
.button._theme_P2, .button { border-radius: 3px; border: 1px solid #f00; }
Somit wird dieses Thema zum Standard, aber Sie können es direkt verwenden, wenn Sie möchten.
Zusammenfassung
Dieses Manifest soll einige der Probleme lösen, die während des Layouts gemäß BEM auftreten. Die Hauptkomponente war eine Aufteilung in Komponentenlayout und Seitenlayout. Obwohl das Manifest ziemlich revolutionär, unkanonisch und mutig aussieht, löst es die genannten Probleme. Um alles teilweise oder gar nicht zu nutzen - entscheiden Sie natürlich.
PS Wenn Sie jetzt wütend die gesamte Seite scrollen, um ein Minus zu setzen, vergessen Sie nicht, einen Kommentar zu schreiben, da Ihr Minus sonst keinen Nutzen bringt (
ebenso wie das Manifest ).