Wie man mit BEM besseres CSS schreibt

Dieser Blog und das Video sind speziell für Entwickler gedacht, die ihr CSS optimieren möchten. Es ist sehr wichtig, lesbares CSS für Ihre Teamkollegen und sich selbst zu haben.

Es wird Ihnen und Ihrem Team helfen, die Website oder Anwendung zu einem späteren Zeitpunkt weiterzuentwickeln.

Meiner Meinung nach ist die CSS-Namenskonvention BEM der perfekte Weg, um Ihre CSS-Klassen und Selektoren besser als zuvor zu schreiben.

Wenn Sie ein visuelles Beispiel dafür mögen, wie ich mein bereits entwickeltes CSS auf das besser lesbare BEM umstellen würde, schauen Sie sich das Video an.

Wenn Sie eher eine Person zum Lesen sind, folgen Sie bitte dem Text unten

Video-Notizen

Beispiel-Website

In diesem Beispiel habe ich ein Bootstrap-Design verwendet. Sie können das Business-Design kostenlos herunterladen.

Erhabener Text

In diesem Editor habe ich den Sublime Text-Editor verwendet. Sie können es kostenlos herunterladen. Wenn Sie mit Sublime Text ein echter Profi werden möchten, schauen Sie sich bitte den Kurs / das Buch unseres Freundes Wes Bos an.

Detaillierte BEM-Informationen

Wenn Sie die BEM-Dokumentation lesen möchten, überprüfen Sie diese bitte auf der BEM-Website.

In meinem Video habe ich einen detaillierten Blogeintrag über BEM auf der CSSwizardy-Website gezeigt.

Kommen wir zum Code!

Schritt 1: HTML & CSS wie wir es gelernt haben

Wenn Sie lernen, CSS zu schreiben, ist das ähnlich:

HTML

CSS

nav {
  Höhe: 60px;
  maximale Breite: 1024px;
}

nav ul {
  Rand: 0;
  Polsterung: 0;
  Textausrichtung: Mitte;
}

nav ul li {
  Anzeige: Inline;
}

nav ul li a {
  Anzeige: Inline-Block;
  Polsterung: .5em 1em;
}

HTML & CSS analysieren

Wenn Sie HTML und CSS analysieren, sehen wir Folgendes.

  • Struktur mit nur Elementen
  • Keine Klassennamen
  • Mehrstufige Selektoren

Probleme, die Sie beim Schreiben von HTML und CSS wie folgt entdecken werden!

Als ich mit Frontend Development anfing, wurde mir gesagt, dass ich es schreiben soll.

Vielleicht werden Sie das Problem nicht sehen, aber am Ende dieses Blogs werden Sie es sicher wissen!

Die Probleme, die Sie dabei entdecken werden (im Video werden Sie es sehen):

  • Wenn Sie dasselbe HTML an einer anderen Stelle verwenden, wird es unübersichtlich, wenn Sie es hier ändern, da es überall wiedergegeben wird! Es ist also nicht skalierbar.
  • Um das Styling zu überschreiben, müssen Sie sehr spezielle Selektoren mit mehreren Ebenen oder sogar schlechter schreiben, verwenden Sie! Important zum Überschreiben.
  • Dies wird viele Fehler mit großen CSS-Dateien verursachen.
  • Die CSS-Selektoren erklären nicht, wo sich die HTML-Elemente auf der Seite befinden. Es ist also nicht selbsterklärend.

Schritt 2: Optimieren Sie Ihr HTML & CSS ein bisschen besser

Als ich einige Jahre Erfahrung in der Frontend-Entwicklung hatte, sah mein HTML & CSS so aus:

HTML

CSS

.navigation {
  Höhe: 60px;
  maximale Breite: 1024px;
}

.navigation ul {
  Rand: 0;
  Polsterung: 0;
  Textausrichtung: Mitte;
}

.navigation li {
  Anzeige: Inline;
}

.navigation a {
  Anzeige: Inline-Block;
  Polsterung: .5em 1em;
}

HTML & CSS analysieren

Wenn Sie das optimierte HTML und CSS analysieren, sehen wir Folgendes.

  • Die CSS-Selektoren sind kürzer
  • Die CSS-Selektoren sind weniger spezifisch
  • Die CSS-Selektoren enthalten etwas mehr Kontext, aber nicht den Kontext, den BEM geben könnte.

Als ich gerade dabei war, dies zu entwickeln, war es für mich ziemlich optimiert, dachte ich. Aber ich habe ein paar Jahre gebraucht, um herauszufinden, dass ich etwas mehr Optimierung brauchte. Weil es noch ein paar Probleme gab.

  • Wenn ich das Styling überschreiben wollte, musste ich meinen Selektoren noch ein paar Ebenen hinzufügen, indem ich sie genauer definierte.
  • Manchmal, wenn ich mit CSS-Bibliotheken / Frameworks arbeitete, musste ich immer noch! Important verwenden.
  • Die Selektoren waren nicht so selbsterklärend.

Schritt 3: Verwenden von BEM zum Schreiben von besserem HTML und CSS

Als ich entdeckte, dass Browser andere Selektoren als Menschen lesen, war es wie „was? huh? ". Das war so neu für mich! Ich stellte fest, dass meine CSS-Selektoren nicht so gut waren, wie ich dachte.

Als ich nach Methoden suchte, um Maßnahmen zu ergreifen und die CSS-Selektoren zu verbessern, entdeckte ich BEM. Im Video können Sie überprüfen, wie ich BEM auf CSS und HTML auf einer Beispielwebsite anwende.

In diesem Beispiel können Sie sehen, wie das HTMl & CSS nach BEM aussehen wird.

HTML

CSS

.main-nav {
  Höhe: 60px;
  maximale Breite: 1024px;
}

.main-nav__list {
  Rand: 0;
  Polsterung: 0;
  Textausrichtung: Mitte;
}

.main-nav__list-item {
  Anzeige: Inline;
}

.main-nav__link-item {
  Anzeige: Inline-Block;
  Polsterung: .5em 1em;
}

.main-nav__link-item — active {
  Schriftdicke: fett;
  Farbe Rot;
  Hintergrund: grau;
}

HTML & CSS analysieren

Wenn Sie HTML und CSS analysieren, werden Sie für jedes Element einen Klassennamen finden. Klassennamen, die sich selbst beschreiben. Sie müssen nicht auf eine Website schauen, um zu lesen, wo sich diese Komponente auf der Seite befindet.

Es erklärt für sich, dass es die Hauptnavigation ist. Alle Listenelemente und Links bieten auch direkten Kontext für Sie und Ihr Team, die am selben Code arbeiten.

Sehen wir uns an, ob Sie die Probleme beheben, die wir zuvor gesehen haben.

  • Jetzt können Sie den HTML-Code kopieren und er bleibt erhalten. Wenn Sie den HTML-Code wiederverwenden möchten, ändern Sie .main-nav in "footer-nav", und die Hauptnavigation zeigt keine geerbten Stile an. Das ist also perfekt skalierbar.
  • Wenn Sie den Stil von einem oder mehreren Elementen überschreiben möchten, müssen Sie nur einen weiteren Klassennamen hinzufügen, so einfach ist das!
  • Insbesondere wenn Sie einen CSS-Preprozessor verwenden, weist Ihre Entwicklungsstruktur eine gute Architektur auf.
  • Die CSS-Selektoren und Klassennamen sind selbsterklärend. So ist es jetzt leicht zu finden. Es gibt viel mehr Kontext als zuvor.

Aktualisiert: 04.10.2017 um 14:27 Uhr

Andere BEM-Beispiele

Wenn Sie von meinem Beispiel nicht überzeugt sind, warum Sie BEM verwenden sollten, ist das jetzt ein Problem! Bitte besuchen Sie die Website von Sparkbox. Dort finden Sie ein sehr detailliertes und praktisches Beispiel für die Verwendung von BEM in Ihrer Entwicklung. (Ich habe diesen Tipp von einem der Kommentare zu Reddit bekommen!

Wenn du Hilfe benötigst

Wenn Sie Hilfe beim Einrichten Ihres CSS in die BEM-Struktur benötigen, lassen Sie es mich bitte in den Kommentaren oder in Messenger wissen!

Folge uns auf:

Folgen Sie uns auf Medium: https://medium.com/mr-frontend-community
 Folgen Sie uns auf Twitter: https://twitter.com/frontendmr
 Folgen Sie uns auf Facebook: http://facebook.com/mrfrontendcommunity/
 Folgen Sie uns auf Instagram: @mrfrontend