CSS-Namenskonventionen, die Ihnen stundenlanges Debuggen ersparen

Ich habe viele Entwickler sagen hören, dass sie CSS hassen. Nach meiner Erfahrung ist dies darauf zurückzuführen, dass Sie sich nicht die Zeit genommen haben, CSS zu lernen.

Koreanisch?

알림: 한국인 독자 분들 을 위해 본 기사 는 한국어 로 되었으며 되었으며, 한국어 버전 은 여기 에서 보실 수 있습니다

CSS ist nicht die schönste "Sprache", aber es hat das Styling des Webs seit über 20 Jahren erfolgreich vorangetrieben. Nicht schlecht, oder?

Wenn Sie jedoch mehr CSS schreiben, sehen Sie schnell einen großen Nachteil.

Es ist verdammt schwierig, CSS zu pflegen.

Schlecht geschriebenes CSS wird schnell zum Albtraum.

Hier sind einige Namenskonventionen, die Ihnen ein wenig Stress und unzählige Stunden auf der ganzen Linie ersparen.

Verwenden Sie durch Bindestriche getrennte Zeichenfolgen

Wenn Sie viel JavaScript schreiben, ist das Schreiben von Variablen im Kamelfall gängige Praxis.

var redBox = document.getElementById('...')

Großartig, richtig?

Das Problem ist, dass diese Form der Benennung für CSS nicht gut geeignet ist.

Mach das nicht:

.redBox { border: 1px solid red;}

Tun Sie stattdessen Folgendes:

.red-box { border: 1px solid red;}

Dies ist eine ziemlich standardmäßige CSS-Namenskonvention. Es ist wohl besser lesbar.

Es stimmt auch mit den CSS-Eigenschaftsnamen überein.

// Correct
.some-class { font-weight: 10em}
// Wrong
.some-class { fontWeight: 10em}

Die BEM-Namenskonvention

Teams haben unterschiedliche Ansätze zum Schreiben von CSS-Selektoren. Einige Teams verwenden Bindestrich-Trennzeichen, während andere die strukturiertere Namenskonvention namens BEM bevorzugen.

Im Allgemeinen gibt es drei Probleme, die CSS-Namenskonventionen zu lösen versuchen:

  1. Um zu wissen, was ein Selektor tut, schauen Sie einfach auf seinen Namen
  2. Um eine Vorstellung davon zu haben, wo ein Selektor verwendet werden kann, sehen Sie ihn sich einfach an
  3. Um die Beziehungen zwischen Klassennamen zu kennen, schauen Sie sie sich einfach an

Haben Sie jemals so geschriebene Klassennamen gesehen:

.nav--secondary { ...}
.nav__header { ...}

Das ist die BEM-Namenskonvention.

BEM einem 5-Jährigen erklären

BEM versucht, die gesamte Benutzeroberfläche in kleine wiederverwendbare Komponenten zu unterteilen.

Betrachten Sie das Bild unten:

Nein, es ist nicht preisgekrönt :(

Der Strichmännchen repräsentiert eine Komponente, beispielsweise einen Designblock.

Möglicherweise haben Sie bereits vermutet, dass das B in BEM für 'Block' steht.

In der realen Welt kann dieser "Block" eine Site-Navigation, eine Kopfzeile, eine Fußzeile oder einen anderen Designblock darstellen.

Nach der oben erläuterten Vorgehensweise wäre ein idealer Klassenname für diese Komponente stick-man.

Die Komponente sollte folgendermaßen gestaltet sein:

.stick-man { }

Wir haben hier begrenzte Zeichenfolgen verwendet. Gut!

E für Elemente

Das E in 'BEM' steht für Elemente.

Gesamtdesignblöcke leben selten isoliert.

Zum Beispiel hat der Strichmännchen ein head, zwei wunderschöne armsund feet.

Die head,, feetund armssind alle Elemente innerhalb der Komponente. Sie können als untergeordnete Komponenten angesehen werden, dh als untergeordnete Elemente der gesamten übergeordneten Komponente.

Unter Verwendung der BEM-Namenskonvention werden Elementklassennamen durch Hinzufügen von zwei Unterstrichen gefolgt vom Elementnamen abgeleitet.

Zum Beispiel:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

M für Modifikatoren

Das M in 'BEM' steht für Modifikatoren.

Was wäre, wenn der Strichmännchen modifiziert würde und wir einen blueoder einen redStrichmännchen haben könnten?

In der realen Welt kann dies ein redKnopf oder ein blueKnopf sein. Dies sind Modifikationen der betreffenden Komponente.

Bei Verwendung von BEM werden Modifikatorklassennamen abgeleitet, indem zwei Bindestriche gefolgt vom Elementnamen hinzugefügt werden .

Zum Beispiel:

.stick-man--blue {
}
.stick-man--red {
}

Das letzte Beispiel zeigte, dass die übergeordnete Komponente geändert wird. Dies ist nicht immer der Fall.

Was wäre, wenn wir Strichmännchen unterschiedlicher headGröße hätten?

Dieses Mal wurde das Element geändert. Denken Sie daran, dass das Element eine untergeordnete Komponente innerhalb des gesamten enthaltenden Blocks ist.

Das .stick-manrepräsentiert das Block, .stick-man__headdas Element.

Wie im obigen Beispiel zu sehen, können auch doppelte Bindestriche wie folgt verwendet werden:

.stick-man__head--small {
}
.stick-man__head--big {
}

Beachten Sie auch hier die Verwendung der doppelten Bindestriche im obigen Beispiel. Dies wird verwendet, um einen Modifikator zu bezeichnen.

Jetzt hast du es.

So funktioniert im Grunde die BEM-Namenskonvention.

Persönlich verwende ich für einfache Projekte normalerweise nur Bindestrich-Delimeter-Klassennamen und BEM für komplexere Benutzeroberflächen.

Sie können mehr über BEM lesen.

BEM - Blockelement-Modifikator

BEM - Block Element Modifier ist eine Methode, mit der Sie wiederverwendbare Komponenten und Code-Sharing auf… getbem.com erreichen können

Warum Namenskonventionen verwenden?

In der Informatik gibt es nur zwei schwierige Probleme: die Ungültigmachung des Caches und die Benennung von Dingen - Phil Karlton

Dinge zu benennen ist schwer. Wir versuchen, die Dinge einfacher zu machen und uns in Zukunft Zeit mit besser wartbarem Code zu sparen.

Wenn Sie die Dinge in CSS richtig benennen, ist Ihr Code leichter zu lesen und zu pflegen.

Wenn Sie die BEM-Namenskonvention verwenden, wird es einfacher, die Beziehung zwischen Ihren Designkomponenten / -blöcken zu erkennen, indem Sie sich nur das Markup ansehen.

Selbstbewusst fühlen?

CSS-Namen mit JavaScript-Hooks

Heute ist Johns erster Arbeitstag.

Er erhält einen HTMLCode, der so aussieht:

John hat diesen Artikel gelesen und stellt fest, dass dies möglicherweise nicht der beste Weg ist, Dinge zu benennen CSS. Also geht er voran und überarbeitet die Codebasis wie folgt:

Sieht gut aus, oder?

John unbekannt, hatte er die Codebasis gebrochen ???

Wie?

Irgendwo im JavaScript-Code gab es eine Beziehung zum vorherigen Klassennamen siteNavigation:

//the Javasript code
const nav = document.querySelector('.siteNavigation')

Mit der Änderung des Klassennamens wurde die navVariable zu null.

Wie traurig.

Um solche Fälle zu vermeiden, haben Entwickler unterschiedliche Strategien entwickelt.

1. Verwenden Sie js- Klassennamen

Eine Möglichkeit, solche Fehler zu mindern, ist die Verwendung von a js-*Klassenname zur Bezeichnung einer Beziehung mit dem betreffenden DOM-Element.

Zum Beispiel:

Und im JavaScript-Code:

//the Javasript code
const nav = document.querySelector('.js-site-navigation')

Als Konvention würde jeder, der den js-site-navigationKlassennamen sieht, verstehen, dass es eine Beziehung zu diesem DOM-Element im JavaScript-Code gibt.

2. Verwenden Sie das Rel-Attribut

Ich benutze diese Technik nicht selbst, aber ich habe Leute gesehen, die das getan haben.

Erkennst du das?

Grundsätzlich definiert das Attribut rel die Beziehung, die die verknüpfte Ressource zu dem Dokument hat, von dem aus auf sie verwiesen wird.

Im vorherigen Beispiel mit John würden Befürworter dieser Technik Folgendes tun:

Und im JavaScript:

const nav = document.querySelector("[rel='js-site-navigation']")

Ich habe meine Zweifel an dieser Technik, aber Sie werden wahrscheinlich in einigen Codebasen darauf stoßen. Der Anspruch ist hier, „na ja, es ist eine Beziehung mit Javascript, so dass ich das rel - Attribut , das bezeichnen“ .

Das Web ist ein großer Ort mit vielen verschiedenen „Methoden“ zur Lösung des gleichen Problems.

3. Verwenden Sie keine Datenattribute

Einige Entwickler verwenden Datenattribute als JavaScript-Hooks. Das ist nicht richtig. Per Definition werden Datenattribute zum Speichern benutzerdefinierter Daten verwendet .

Bearbeiten Nr. 1: Wie von einigen erstaunlichen Personen im Kommentarbereich erwähnt, ist es in bestimmten Fällen möglicherweise in Ordnung, Datenattribute zu verwenden, wenn Benutzer das Attribut 'rel' verwenden. Es ist immerhin Ihr Anruf.

Bonus-Tipp: Schreiben Sie weitere CSS-Kommentare

Dies hat nichts mit Namenskonventionen zu tun, spart aber auch Zeit.

Während viele Webentwickler versuchen, KEINE JavaScript-Kommentare zu schreiben oder sich an einige zu halten, sollten Sie meiner Meinung nach mehr CSS-Kommentare schreiben.

Da CSS nicht die eleganteste „Sprache“ ist, können gut strukturierte Kommentare Zeit sparen, wenn Sie versuchen, Ihren Code zu verstehen.

Es tut nicht weh.

Sehen Sie sich an, wie gut der Bootstrap-Quellcode kommentiert ist.

Sie müssen keine Kommentare schreiben, um zu sagen color: red, dass eine rote Farbe entsteht. Wenn Sie jedoch einen weniger offensichtlichen CSS-Trick verwenden, können Sie gerne einen Kommentar schreiben.

Bereit, Profi zu werden?

Ich habe einen kostenlosen CSS-Leitfaden erstellt, mit dem Sie Ihre CSS-Kenntnisse sofort verbessern können. Holen Sie sich das kostenlose eBook.