ID und Klassenbenennung
Verwenden Sie immer ID- und Klassennamen, die den Zweck und die Verwendung des Elements widerspiegeln, oder andere gebräuchliche Namen. Statt Schein und obskuren Namen.
Namen, die spezifisch sind und den Zweck des Elements widerspiegeln, sollten bevorzugt werden, da diese am verständlichsten sind und sich am wenigsten ändern können.
Gebräuchliche Namen sind lediglich alternative Namen für mehrere Elemente. Sie sind unter ihren Geschwisterelementen gleich und haben keine besondere Bedeutung.
Unterscheiden Sie sie so, dass sie eine besondere Bedeutung haben und oft als „Helfer“ benötigt werden.
Obwohl die Semantik von Klassennamen und IDs für die Computeranalyse keine praktische Bedeutung hat,
Semantische Namen sind in der Regel die richtige Wahl, da sie Informationen darstellen, die keine Ausdrucksbeschränkungen auferlegen.
Nicht empfohlen
.fw-800 {
Schriftstärke: 800;
}
.Rot {
Farbe: rot;
}empfehlen
.schwer {
Schriftstärke: 800;
}
.wichtig {
Farbe: rot;
} Angemessener Verzicht auf Ausweise
Normalerweise sollten IDs nicht auf Stile angewendet werden.
ID-Stile können nicht wiederverwendet werden und Sie können eine ID nur einmal pro Seite verwenden.
Die einzig wirksame Verwendung von IDs besteht darin, die Position innerhalb einer Webseite oder einer gesamten Site zu bestimmen.
Dennoch sollten Sie immer die Verwendung von class anstelle von id in Betracht ziehen, es sei denn, Sie verwenden es nur einmal.
Nicht empfohlen
#content .title {
Schriftgröße: 2em;
}empfehlen
.content .title {
Schriftgröße: 2em;
} Ein weiteres Argument gegen die Verwendung von IDs ist, dass Selektoren, die IDs enthalten, eine hohe Gewichtung haben.
Ein Selektor, der nur eine ID enthält, hat eine höhere Gewichtung als ein Selektor, der 1000 Klassennamen enthält, was es seltsam macht.
// Dieser Selektor hat ein höheres Gewicht als der folgende Selektor #content .title {
Farbe: rot;
}
// als dieser Selektor!
HTML-Text div.content.news-content .title.content-title.important {
Farbe: blau;
} Vermeiden Sie Tag-Namen in CSS-Selektoren
Beim Aufbau von Selektoren sollten Sie klare, präzise und semantische Klassennamen verwenden. Verwenden Sie keine Tag-Selektoren. Die Wartung ist einfacher, wenn Sie sich nur um Ihre Klassennamen und nicht um Ihre Codeelemente kümmern.
Unter dem Gesichtspunkt der Trennung sollten HTML-Tags/-Semantiken nicht in der Präsentationsebene zugewiesen werden.
Es könnte sich um eine geordnete Liste handeln, die in eine ungeordnete Liste geändert werden muss, oder um ein Div, das in einen Artikel umgewandelt werden muss.
Wenn Sie nur aussagekräftige Klassennamen verwenden,
Und ohne Elementselektoren zu verwenden, müssen Sie nur Ihr HTML-Markup ändern, ohne Ihr CSS zu ändern.
Nicht empfohlen
div.content > header.content-header > h2.title {
Schriftgröße: 2em;
}empfehlen
.content > .content-header > .title {
Schriftgröße: 2em;
} so präzise wie möglich
Viele Front-End-Entwickler verwenden beim Schreiben von Selektorketten keine direkten Unterselektoren (Hinweis: Der Unterschied zwischen direkten Unterselektoren und Nachkommenselektoren).
Manchmal kann dies zu schmerzhaften Designproblemen führen und manchmal kann es die Leistung beeinträchtigen.
Allerdings ist dies auf jeden Fall eine sehr schlechte Praxis.
Wenn Sie keinen sehr allgemeinen Selektor schreiben, der mit dem Ende des DOM übereinstimmen muss, sollten Sie immer direkte Unterselektoren in Betracht ziehen.
Betrachten Sie das folgende DOM:
<article class="content news-content"> <span class="title">Nachrichtenveranstaltung</span> <div class="content-body"> <div class="title content-title"> Schauen Sie sich das an </div> <p>Dies ist ein Nachrichtenartikelinhalt</p> <div class="teaser"> <div class="title">Kaufen Sie dies</div> <div class="teaser-content">Yey!</div> </div> </div> </article>
Das folgende CSS wird auf alle drei Elemente mit der Titelklasse angewendet.
Um dann die verschiedenen Stile unter der Titelklasse unter der Inhaltsklasse und der Titelklasse unter der Teaser-Klasse aufzulösen, sind präzisere Selektoren erforderlich, um ihre Stile erneut zu schreiben.
Nicht empfohlen
.content .title {
Schriftgröße: 2rem;
}empfehlen
.content > .title {
Schriftgröße: 2rem;
}
.content > .content-body > .title {
Schriftgröße: 1,5rem;
}
.content > .content-body > .teaser > .title {
Schriftgröße: 1,2rem;
} Abkürzungsattribut
CSS bietet verschiedene abgekürzte Eigenschaften (z. B. Schriftart), die nach Möglichkeit verwendet werden sollten, auch wenn nur ein Wert festgelegt ist.
Die Verwendung abgekürzter Attribute ist für die Effizienz und Lesbarkeit des Codes hilfreich.
Nicht empfohlen
CSS-Code:
border-top-style: keine; Schriftfamilie: Palatino, Georgia, Serif; Schriftgröße: 100 %; Zeilenhöhe: 1,6; Polsterung unten: 2em; Polsterung links: 1em; Polsterung rechts: 1em; Polsterung oben: 0;
empfehlen
CSS-Code:
Rand oben: 0; Schriftart: 100 %/1,6 Palatino, Georgia, Serif; Polsterung: 0 1em 2em;
0 und Einheiten
Lassen Sie Einheiten nach dem Wert „0“ weg. Verwenden Sie keine Einheiten nach einem 0-Wert, es sei denn, es gibt einen Wert.
Nicht empfohlen
CSS-Code:
Polsterung unten: 0px; Rand: 0em;
empfehlen
CSS-Code:
Polsterung unten: 0; Rand: 0;
Hexadezimale Schreibweise
Verwenden Sie nach Möglichkeit die dreistellige Hexadezimalschreibweise.
Farbwerte ermöglichen eine Darstellung wie diese,
Die hexadezimale Darstellung mit drei Zeichen ist kürzer.
Verwenden Sie immer kleingeschriebene Hexadezimalzahlen.
Nicht empfohlen
Farbe: #FF33AA;
empfehlen
Farbe: #f3a;
Trennzeichen zwischen ID und Klassenname
Verwenden Sie einen Bindestrich (Bindestrich), um die Wörter in der ID und dem Klassennamen zu trennen. Um das Verständnis der Lektion zu verbessern, verwenden Sie zum Verbinden von Wörtern und Abkürzungen im Selektor keine anderen Zeichen als Bindestriche (auch keine).
Darüber hinaus erkennt der Standardattributselektor standardmäßig Bindestriche als Worttrennzeichen für [Attribut|=Wert],
Bleiben Sie daher am besten bei Bindestrichen als Trennzeichen.
Nicht empfohlen
.demoimage {}
.error_status {} empfehlen
#video-id {}
.ads-sample {}Hacks
Vermeiden Sie die Erkennung von Benutzeragenten und CSS-„Hacks“ – probieren Sie zunächst einen anderen Ansatz. Stilunterschiede lassen sich leicht durch User-Agent-Erkennung oder spezielle CSS-Filter, Workarounds und Hacks beheben. Beide Methoden sollten als letzter Ausweg betrachtet werden, um eine effiziente und überschaubare Codebasis zu erreichen und aufrechtzuerhalten. Mit anderen Worten: User-Agent-Erkennung und Hacks auf lange Sicht
Wird dem Projekt schaden, da Projekte immer den Weg des geringsten Widerstands einschlagen sollten. Allerdings kann es leicht passieren, dass User-Agent-Erkennung und Hacks in Zukunft zu oft eingesetzt werden.
Deklarationsanordnung
Dies ist ein grober Überblick über die Reihenfolge, in der CSS-Eigenschaften in einen Selektor geschrieben werden. Dies ist wichtig, um eine bessere Lesbarkeit und Scanbarkeit zu gewährleisten.
Als Best Practice sollten wir die folgende Reihenfolge einhalten (die der Reihenfolge der folgenden Tabelle entsprechen sollte):
Struktureigenschaften:
Anzeige
Position, links, oben, rechts usw.
Überlauf, Float, Clear usw.
Rand, Polsterung
Ausdruckseigenschaften:
Hintergrund, Rand usw.
Schriftart, Text
Nicht empfohlen
.Kasten {
Schriftfamilie: „Arial“, serifenlos;
Rand: 3px fest #ddd;
links: 30 %;
Position: absolut;
Texttransformation: Großbuchstaben;
Hintergrundfarbe: #eee;
rechts: 30 %;
Anzeige: blockieren;
Schriftgröße: 1,5rem;
Überlauf: versteckt;
Polsterung: 1em;
Rand: 1em;
}empfehlen
.Kasten {
Anzeige: Block;
Position: absolut;
links: 30 %;
rechts: 30 %;
Überlauf: versteckt;
Rand: 1em;
Polsterung: 1em;
Hintergrundfarbe: #eee;
Rand: 3px fest #ddd;
Schriftfamilie: „Arial“, serifenlos;
Schriftgröße: 1,5rem;
Texttransformation: Großbuchstaben;
}Ende der Aussage
Um Konsistenz und Erweiterbarkeit sicherzustellen, sollte jede Anweisung mit einem Semikolon enden und jede Anweisung in eine neue Zeile einschließen.
Nicht empfohlen
CSS-Code:
.prüfen {
Anzeige: Block; Höhe: 100px
}empfehlen
CSS-Code:
.prüfen {
Anzeige: Block;
Höhe: 100px;
}Ende des Attributnamens
Verwenden Sie nach dem Doppelpunkt im Eigenschaftsnamen ein Leerzeichen. Aus Konsistenzgründen
Verwenden Sie immer ein Leerzeichen zwischen dem Attribut und dem Wert (jedoch kein Leerzeichen zwischen dem Attribut und dem Doppelpunkt).
Nicht empfohlen
CSS-Code:
h3 {
Schriftstärke:fett;
}empfehlen
CSS-Code:
h3 {
Schriftstärke: fett;
}Trennung von Selektoren und Deklarationen
Verwenden Sie für jede Selektor- und Eigenschaftsdeklaration immer eine neue Zeile.
Nicht empfohlen
CSS-Code:
a:focus, a:active {
Position: relativ; oben: 1px;
}empfehlen
CSS-Code:
h1,
h2,
h3 {
Schriftstärke: normal;
Zeilenhöhe: 1,2;
}Regeltrennung
Regeln werden immer durch eine Leerzeile (doppelter Zeilenumbruch) getrennt.
empfehlen
CSS-Code:
html {
Hintergrund: #fff;
}
Körper {
Rand: automatisch;
Breite: 50 %;
}CSS-Zitate
Schließen Sie Attributselektoren oder Attributwerte in doppelte Anführungszeichen („“) statt in einfache Anführungszeichen (“) ein.
Verwenden Sie keine Anführungszeichen für URI-Werte (url()).
Nicht empfohlen
CSS-Code:
@import url('//cdn.com/foundation.css');
html {
Schriftfamilie: 'open sans', arial, sans-serif;
}
body:after {
Inhalt: 'Pause';
}empfehlen
CSS-Code:
@import-URL(//cdn.com/foundation.css);
html {
Schriftfamilie: „open sans“, arial, sans-serif;
}
body:after {
Inhalt: „Pause“;
}Selektorverschachtelung (SCSS)
In Sass können Sie Selektoren verschachteln, wodurch der Code sauberer und lesbarer wird. Verschachteln Sie alle Selektoren, vermeiden Sie jedoch die Verschachtelung von Selektoren ohne Inhalt.
Wenn Sie einige Stilattribute für untergeordnete Elemente angeben müssen und das übergeordnete Element keine Stilattribute hat,
Es können reguläre CSS-Selektorketten verwendet werden.
Dadurch wird verhindert, dass Ihr Skript zu komplex aussieht.
Nicht empfohlen
CSS-Code:
// Kein gutes Beispiel, da überhaupt keine Verschachtelung verwendet wird
.Inhalt {
Anzeige: Block;
}
.content > .news-article > .title {
Schriftgröße: 1,2em;
}Nicht empfohlen
CSS-Code:
// Die Verwendung von Verschachtelungen ist besser, aber nicht in allen Fällen
// Vermeiden Sie Verschachtelungen, wenn keine Attribute vorhanden sind, und verwenden Sie stattdessen Selektorketten
.Inhalt {
Anzeige: Block;
> .news-article {
> .title {
Schriftgröße: 1,2em;
}
}
}empfehlen
CSS-Code:
// Dieses Beispiel verfolgt beim Verschachteln den besten Ansatz, verwendet jedoch nach Möglichkeit Selektorketten
.Inhalt {
Anzeige: Block;
> .news-article > .title {
Schriftgröße: 1,2em;
}
}Einführung von Leerzeilen bei der Verschachtelung (SCSS)
Lassen Sie zwischen verschachtelten Selektoren und CSS-Eigenschaften eine leere Zeile.
Nicht empfohlen
CSS-Code:
.Inhalt {
Anzeige: Block;
> .news-article {
Hintergrundfarbe: #eee;
> .title {
Schriftgröße: 1,2em;
}
> .article-footnote {
Schriftgröße: 0,8em;
}
}
}empfehlen
CSS-Code:
.Inhalt {
Anzeige: Block;
> .news-article {
Hintergrundfarbe: #eee;
> .title {
Schriftgröße: 1,2em;
}
> .article-footnote {
Schriftgröße: 0,8em;
}
}
}Kontextuelle Medienabfrage (SCSS)
In Sass können Sie beim Verschachteln Ihrer Selektoren auch kontextbezogene Medienabfragen verwenden.
In Sass können Sie Medienabfragen auf jeder beliebigen Verschachtelungsebene verwenden.
Das resultierende CSS wird so transformiert, dass die Medienabfrage als umschlossener Selektor gerendert wird.
Diese Technologie ist sehr praktisch,
Hilft dabei, den Kontext beizubehalten, in den die Medienabfrage gehört.
Der erste Ansatz ermöglicht es Ihnen, zuerst Ihre mobilen Stile zu schreiben und dann kontextbezogene Medienabfragen zu verwenden, um Desktop-Stile dort bereitzustellen, wo Sie sie benötigen.
Nicht empfohlen
CSS-Code:
// Dieses Mobile-First-Beispiel sieht aus wie einfaches CSS, bei dem die gesamte Struktur von SCSS wiederholt wird
// unten in einer Medienabfrage. Dies ist fehleranfällig und erschwert die Wartung, da die Zuordnung nicht so einfach ist
// der Inhalt in der Medienabfrage zum Inhalt im oberen Teil (mobiler Stil)
.content-page {
Schriftgröße: 1,2rem;
> .main {
Hintergrundfarbe: Weißrauch;
> .latest-news {
Polsterung: 1rem;
> .news-article {
Polsterung: 1rem;
> .title {
Schriftgröße: 2rem;
}
}
}
> .content {
Rand oben: 2rem;
Polsterung: 1rem;
}
}
> .page-footer {
Rand oben: 2rem;
Schriftgröße: 1rem;
}
}
@media screen und (min-width: 641px) {
.content-page {
Schriftgröße: 1rem;
> .main > .latest-news > .news-article > .title {
Schriftgröße: 3rem;
}
> .page-footer {
Schriftgröße: 0,8rem;
}
}
}empfehlen
CSS-Code:
// Dies ist das gleiche Beispiel wie oben, aber hier verwenden wir kontextbezogene Medienabfragen, um die verschiedenen Stile einzufügen
// für unterschiedliche Medien in den richtigen Kontext.
.content-page {
Schriftgröße: 1,2rem;
@media screen und (min-width: 641px) {
Schriftgröße: 1rem;
}
> .main {
Hintergrundfarbe: Weißrauch;
> .latest-news {
Polsterung: 1rem;
> .news-article {
Polsterung: 1rem;
> .title {
Schriftgröße: 2rem;
@media screen und (min-width: 641px) {
Schriftgröße: 3rem;
}
}
}
}
> .content {
Rand oben: 2rem;
Polsterung: 1rem;
}
}
> .page-footer {
Rand oben: 2rem;
Schriftgröße: 1rem;
@media screen und (min-width: 641px) {
Schriftgröße: 0,8rem;
}
}
}Verschachtelte Reihenfolge und übergeordnete Selektoren (SCSS)
Wenn Sie die Verschachtelungsfunktion von Sass verwenden,
Wichtig ist eine klare Verschachtelungsreihenfolge,
Das Folgende ist die Reihenfolge, die ein SCSS-Block haben sollte.
Stilattribute des aktuellen Selektors <br/>Pseudoklassenselektor des übergeordneten Selektors (:first-letter, :hover, :active usw.)
Pseudoklassenelemente (:before und :after)
Deklarationsstil des übergeordneten Selektors (.selected, .active, .enlarged usw.)
Verwenden Sie als Abschluss den Unterselektor für kontextbezogene Medienabfragen von Sass
Das folgende Beispiel soll veranschaulichen, wie diese Reihenfolge unter Verwendung des Sass-Parent-Selektors eine klare Struktur erreicht.
Empfohlen
CSS-Code:
.product-teaser {
// 1. Stilattribute
Anzeige: Inline-Block;
Polsterung: 1rem;
Hintergrundfarbe: Weißrauch;
Farbe: grau;
// 2. Pseudoselektoren mit übergeordnetem Selektor
&:hover {
Farbe: Schwarz;
}
// 3. Pseudoelemente mit übergeordnetem Selektor
&:vor {
Inhalt: "";
Anzeige: Block;
Rand oben: 1 Pixel einfarbig grau;
}
&:nach {
Inhalt: "";
Anzeige: Block;
Rand oben: 1 Pixel einfarbig grau;
}
// 4. Zustandsklassen mit übergeordnetem Selektor
&.aktiv {
Hintergrundfarbe: rosa;
Farbe: rot;
// 4.2. Pseuso-Selektor im Zustandsklassen-Selektor
&:hover {
Farbe: dunkelrot;
}
}
// 5. Kontextuelle Medienabfragen
@media screen und (max-width: 640px) {
Anzeige: Block;
Schriftgröße: 2em;
}
// 6. Unterselektoren
> .content > .title {
Schriftgröße: 1,2em;
// 6.5. Kontextuelle Medienabfragen im Unterselektor
@media screen und (max-width: 640px) {
Buchstabenabstand: 0,2em;
Texttransformation: Großbuchstaben;
}
}
}