8 Best Practices für die Benennung von CSS-Klassen und IDs in einem JavaScript-Projekt

Die Namenskonventionen für CSS-Klassen und IDs spielen eine wichtige Rolle beim Verständnis und der Pflege von Code in einem JavaScript-Projekt. Die verwendeten Namen können die Klarheit, Wiederverwendbarkeit und Flexibilität der Codebasis verbessern. Bei der Benennung von CSS-Klassen und IDs in einem JavaScript-Projekt ist es wichtig, Best Practices zu befolgen.

1. Verwenden Sie semantische Namen

Es ist von entscheidender Bedeutung, Namen zu wählen, die die Funktion oder den Zweck des Elements genau erklären. Semantische Namen bieten aussagekräftigen Kontext und erleichtern das Verständnis des Codes.

Anstatt beispielsweise traditionelle Namen wie zu verwenden Kasten oder Halter, versuchen Sie es mit Namen wie Header oder Seitenleiste die die spezifische Rolle der Komponente widerspiegeln.

/* Beispiel für semantische Namen */
.Header {}
.sidebar {}

2. Verwenden Sie einheitliche Namenskonventionen

Konsistenz ist der Schlüssel bei der Benennung von CSS-Klassen und IDs. Durch die Verwendung desselben Benennungsstandards ist es einfacher, die Struktur der Codebasis beizubehalten.

Die Namenskonventionen BEM (Block Element Modifier) ​​und OOCSS (Object-Oriented CSS) sind die am meisten bevorzugten Namenskonventionen.

Mit der OOCSS-Namenskonvention können Sie CSS-Code schreiben, der modular, verwaltbar und skalierbar ist. Hier ist eine Illustration, wie Sie das können Erstellen Sie ein Navigationsmenü mit OOCSS:

/* Struktur */
.nav {
Anzeige: biegen;
Listenstil: keiner;
}
.nav__item {
Rand rechts: 1rem;
}
.nav__link {
Textdekoration: keiner;
Farbe: #333;
}
/* Aussehen */
.nav__link:schweben {
Textdekoration: unterstreichen;
}

In diesem Beispiel haben Sie zwei unterschiedliche Teile des Codes für das Navigationsmenü, einen für die Struktur und einen für das Erscheinungsbild. Der Erscheinungsbildteil beschreibt die Farben und andere Stile, die ihm ein ansprechendes Aussehen verleihen, während der Strukturteil erläutert, wie und wo die Menüelemente positioniert werden.

3. Vermeiden Sie Namespaces

In CSS sind Namespaces semantische Strukturen, die es Ihnen ermöglichen, für ihre Auswahl ein Namespace-Präfix bereitzustellen. Um zwischen Modulen, Bibliotheken oder anderen Teilen der Codebasis zu unterscheiden, die widersprüchliche Klassennamen haben könnten, wird das Namespace-Präfix verwendet.

Diese Funktion ist nützlich, kann jedoch zu Spezifitäts- und Wartbarkeitsproblemen führen.

Einer der größten Nachteile von Namespaces ist die Schwierigkeit, mit der Selektorspezifität umzugehen. Ein Namespace-Präfix kann eine Auswahl spezifischer machen, wodurch es schwieriger wird, Stile in Zukunft zu überschreiben.

Dies führt zu einer Aufblähung des CSS-Codes, der verwirrend und im Laufe der Zeit schwierig zu pflegen ist.

Nimm zum Beispiel:

/* Mit Namensraum */
.mein-Modul.Inhalt {
Hintergrundfarbe: Blau;
}
/* Ohne Namensraum */
.module-header {
Hintergrundfarbe: Rot;
}
.Modulinhalt {
Hintergrundfarbe: Gelb;
}

Das Namespace-Präfix .mein-Modul Und .Inhalt werden beide im Hauptcodeblock verwendet. Dadurch wird die Auswahl präziser, was das Überschreiben zukünftiger Stile anspruchsvoller macht.

Im zweiten Teil wird der Namensraum durch beschreibende Klassennamen ersetzt .module-header Und .Modulinhalt. Dadurch wird der Code nicht nur verständlicher, sondern auch einfacher zu warten.

Die Verwendung von Namespaces erhöht die Komplexität Ihres Programms unnötig, insbesondere wenn viele Personen an verschiedenen Teilen desselben Projekts arbeiten. Möglicherweise fällt es Ihnen schwer, den Code des anderen zu verstehen und zu ändern, da verschiedene Teams möglicherweise unterschiedliche Namespace-Präfixe verwenden.

Verwenden Sie aussagekräftige Klassennamen, zum Beispiel:

.Header {
Hintergrundfarbe: Rot;
}
.Inhalt {
Hintergrundfarbe: Gelb;
}

Durch die Verwendung beschreibender Klassennamen können Sie auf die Notwendigkeit von Namespaces verzichten und Ihre Codebasis gut strukturiert und leicht verständlich halten.

4. Vermeiden Sie globale Namen

In JavaScript-Projekten ist die Vermeidung globaler Namen für CSS-Klassen und IDs von entscheidender Bedeutung. Globale Namen erschweren die Codepflege und erhöhen die Möglichkeit der Benennung von Risiken. Um eine dauerhaftere und skalierbarere Codebasis zu gewährleisten, ist es sinnvoll, im Rahmen einer Komponente oder eines Moduls präzisere Namen zu verwenden.

Betrachten Sie das folgende Beispiel:

 Falsche Verwendung globaler Namen 
<divKlasse="Container">
<divKlasse=„Seitenleiste“>
 Inhalt hier 
div>
div>

Die generischen Klassennamen Seitenleiste Und Container im obigen Beispiel sind anfällig für Konflikte mit anderen Stylesheets oder JavaScript-Code innerhalb des Projekts. Wenn beispielsweise zwei Stylesheets dasselbe angeben .sidebar Klasse, eine mit blauem Hintergrund und die andere mit rotem Hintergrund, hängt die Farbe der Seitenleiste davon ab, welches Stylesheet zuletzt geladen wird. Dies kann zu unerwarteten und unvorhersehbaren Ergebnissen führen.

Um diese Probleme zu minimieren, ist es besser, präzisere Namen zu verwenden, die innerhalb der relevanten Komponente oder des entsprechenden Moduls liegen.

Schauen Sie sich eine erweiterte Version an.

 Mit spezifischen Namen verbessert 
<divKlasse=„header__container“>
<divKlasse=„sidebar__content“>
 Inhalt hier 
div>
div>

In der geänderten Version die Klassennamen header__container Und sidebar__content Machen Sie deutlich, wozu jedes Element dient und was es bewirkt.

Die Verwendung spezifischer Namen verringert das Risiko von Namenskonflikten und stellt sicher, dass sich die Stile nur auf die erwarteten Komponenten innerhalb ihrer jeweiligen Komponenten oder Module auswirken.

5. Verwenden Sie die BEM-Namenskonvention

Die BEM-Namenskonvention (Block Element Modifier) ​​ist für die Benennung von CSS-Klassen und IDs in JavaScript-Projekten beliebt. BEM bietet eine strukturierte und modulare Möglichkeit zur Benennung von Elementen, fördert die Wiederverwendbarkeit und erleichtert die Pflege von Codebasen.

BEM-Konventionen bestehen aus Blöcken, Elementen und Modifikatoren. Ein übergeordnetes Element oder eine eigenständige Komponente wird als Block bezeichnet. Elemente sind die Komponententeile eines Blocks, die vom Kontext des Blocks abhängen. Modifikatoren können das Aussehen oder Verhalten eines Blocks oder Elements ändern.

Hier ist ein Beispiel für die Verwendung der BEM-Namenskonvention:

/* Beispiel für eine BEM-Namenskonvention */
/* Block */
.Header {} 
/* Element des Blocks */
.header__logo {} 
.header__menu {}
/* Modifikator des Elements */
.header__menu – aktiv {} 

Die obige Abbildung zeigt a Header Block mit a Logo und ein Speisekarte Element. Der Speisekarte Artikel erhält die aktiv ändern, um anzuzeigen, dass es aktiv geworden ist.

Sie können die grundlegenden Komponenten und die Verbindungen zwischen den verschiedenen Teilen schnell identifizieren und so die Struktur und Hierarchie der Codebasis klarer machen.

6. Verwenden Sie Präfixe oder Suffixe

Sie können CSS-Klassen- und ID-Namen zusätzliche Einstellungen hinzufügen, indem Sie ihnen ein Präfix oder Postfix voranstellen, insbesondere in größeren Projekten. Sie können ein Präfix wie verwenden js– um anzuzeigen, dass eine Klasse oder ID JavaScript-Funktionen bietet. Namenskonventionen für JavaScript In Verbindung mit diesen CSS-Namenskonventionen können Sie auf lange Sicht Zeit und Mühe sparen.

 HTML mit JavaScript-Präfix 
<TasteKlasse=„js-toggle“>UmschaltenTaste>
<divAusweis=„js-modal“>Modaldiv>

7. Verwenden Sie beschreibende Namen

Mithilfe beschreibender Namen können Sie den Zweck, die Funktion oder den Inhalt eines Elements besser verstehen.

Betrachten Sie das folgende Beispiel:

/* Nicht beschreibende Namen */
.blaue Box {
/* Stile hier */
}
A {
/* Stile hier */
}

Die Klassennamen blaue Box Und A Im obigen Beispiel übermitteln sie keine relevanten Informationen zu den Komponenten, auf die sie verweisen. Das Fehlen einer beschreibenden Benennung kann es für Sie schwierig machen, die Zwecke oder Rollen bestimmter Komponenten innerhalb des Programms schnell zu verstehen.

Verwenden Sie beschreibende Namen, die die Rolle des Elements genau erläutern Verbessern Sie die Lesbarkeit und Wartbarkeit des Codes.

Betrachten Sie das verbesserte Beispiel unten:

/* Beschreibende Namen */
.Produktkarte {
/* Stile hier */
}
.Navigationslink {
/* Stile hier */
}

Die Klassennamen Produktkarte Und Navigationslink in der aktualisierten Version machen deutlich, welchen Zweck jedes Element erfüllt. Mit diesen beschreibenden Namen wird es Ihnen leichter fallen, den Code zu erkunden und zu bearbeiten.

Die Verwendung beschreibender Namen kommt den gegenwärtigen und potenziellen zukünftigen Entwicklern zugute, die an der Codebasis arbeiten. Wenn Sie den Code nach einiger Zeit noch einmal durchgehen, können Sie die Struktur und Funktionsweise der Teile leicht verstehen.

8. Verwenden Sie kurze und prägnante Namen

Während eindeutige Namen wichtig sind, ist es auch wichtig, sie prägnant zu halten. Lange Klassen- und ID-Namen können das Lesen und Verwalten des Codes erschweren. Versuchen Sie, ein Gleichgewicht zwischen Kurzform und Detailliertheit zu finden. Erwägen Sie außerdem die Verwendung bekannter Akronyme oder Abkürzungen im Projektkontext.

Stellen Sie sich den Fall vor, dass Sie CSS verwenden möchten, um ein Navigationsmenü auf Ihrer Website anzupassen. Sie können kürzere, spezifischere Namen verwenden, z Navigationselement oder Navigationslink statt langer wie Navigationsschnittstelle oder Hauptnavigation-Link.

.nav-item {
/* Stile für Navigationsmenüelemente */
}
.nav-link {
/* Stile für Navigationslinks */
}

Die Verwendung von Akronymen oder gängigen Abkürzungen im Projektkontext, wie z Navigation für Navigation, könnte den Code für andere Programmierer viel verständlicher machen.

Best Practices für die Benennung von CSS-Klassen und IDs

In einem JavaScript-Projekt ist es wichtig, CSS-Klassen und IDs richtig zu benennen, um die Lesbarkeit, Wartung und Skalierbarkeit des Codes zu gewährleisten.

Sie können Stylesheets vereinfachen und die Qualität des Codes verbessern. Wenn Sie sich die Zeit nehmen, gute Namenskonventionen festzulegen, wird es sich auf lange Sicht auszahlen, da es für Sie und andere einfacher ist, die Codebasis zu verstehen und zu pflegen.