CSS-Code-Stilregeln

css

Gültigkeit von CSS-Code

Versuchen Sie, gültigen CSS-Code zu verwenden.

Verwenden Sie gültigen CSS-Code, es sei denn, Sie haben es mit Fehlern des CSS-Validator-Programms zu tun oder benötigen proprietäre Syntax.

Verwenden Sie Tools wieW3C CSS validator, um die Gültigkeit zu testen.

Die Verwendung von validem CSS ist ein wichtiges Qualitätskriterium. Wenn du CSS-Code findest, der keine Wirkung hat, lösche ihn und stelle eine angemessene CSS-Nutzung sicher.

ID- und Klassenbenennung

Gib IDs und Klassen generische und aussagekräftige Namen.

Du solltest anhand des ID- oder Klassennamens erkennen können, wofür das Element gedacht ist, statt oberflächlicher oder vager Benennung.

Du solltest die Benennung nach dem spezifischen Zweck des Elements priorisieren, da dies am einfachsten zu verstehen ist und Aktualisierungen reduziert.

Generische Namen können Elementen hinzugefügt werden, bei denen Geschwisterelemente nicht besonders sind oder keine eigene Bedeutung haben, wie zum Beispiel generische Namen wie "helpers".

Die Verwendung funktionaler oder generischer Namen reduziert unnötige Änderungen an Dokumenten oder Templates.

/* 不推荐: 无意义 不易理解 */
#yee-1901 {}

/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

Stil der ID- und Klassenbenennung

Wenn nicht erforderlich, sollten ID- und Klassennamen so kurz wie möglich sein.

Vermittle kurz, worum es bei der ID oder Klasse geht.

Auf diese Weise ist der Code leicht verständlich und effizient.

/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}

Typselektoren

Vermeide die Verwendung von CSS-Typselektoren.

Wenn nicht erforderlich, kombiniere Element-Tag-Namen nicht mit IDs oder Klassen.

Aus Performancegründen sollten Vorfahrenknoten nicht als Selektoren verwendet werden.Performancegründe. 

/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}

Eigenschafts-Kurzschreibweise

Verwende die Kurzschreibweise, wenn du Eigenschaftswerte schreibst.

Viele CSS-Eigenschaften unterstützen KurzschreibweiseKurzschreibweise(zum Beispiel font ) Verwende nach Möglichkeit die Kurzschreibweise, auch wenn du nur einen Wert festlegst.

Die Verwendung der Kurzschreibweise verbessert die Effizienz des Codes und erleichtert das Verständnis.

0 und Einheiten

Wenn nicht erforderlich, 0 füge danach keine Einheiten hinzu.

margin: 0;
padding: 0;

Dezimalzahlen, die mit 0 beginnen

Bei Dezimalzahlen, die mit 0 beginnen, die 0 vor dem Dezimalpunkt weglassen.

Bei Werten oder Längen zwischen -1 und 1 die 0 vor dem Dezimalpunkt 0 kann weggelassen werden.

font-size: .8em;

Anführungszeichen außerhalb von URIs

Anführungszeichen außerhalb von URIs weglassen.

Fügen Sie url() Anführungszeichen verwenden in ( "" , '' ) 。

Hexadezimal

Verwende nach Möglichkeit 3 Zeichen für Hexadezimalzahlen.

Es wird beim Hinzufügen von Farbwerten verwendet; die Verwendung der 3-stelligen Hexadezimalnotation ist kürzer und prägnanter.

/* 不推荐 */
color: #EEBBCC;
/* 推荐 */
color: #ebc;

Präfixe

Füge vor Selektoren ein spezielles Präfix für den Anwendungsbezeichner hinzu (optional).

In großen Projekten ist es am besten, vor ID- oder Klassennamen ein identifizierendes Präfix (Namespace) hinzuzufügen, das durch einen kurzen Bindestrich verbunden wird.

Die Verwendung von Namespaces kann Namenskonflikte verhindern und die Wartung erleichtern, z. B. bei Such- und Ersetzungsvorgängen.

Trennzeichen für ID- und Klassen-Namen

Trennen Sie mehrere Wörter in ID- und Klassennamen mit einem kurzen Bindestrich "-".

Verwenden Sie in Selektornamen keine anderen Verbindungszeichen als den kurzen Bindestrich "-" (auch nicht gar keins), um das Verständnis und die Suche nach Namen zu verbessern.

/* 不推荐：“demo”和“image”中间没加“-” */
.demoimage {}

/* 不推荐：用下划线“_”是屌丝的风格 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}

Hacks

Es ist am besten, verdammte CSS-"Hacks" zu vermeiden — bitte versuchen Sie zuerst andere Lösungen.

Obwohl es verlockend ist, sie zur User-Agent-Erkennung oder als spezielle CSS-Filter zu verwenden, ändert sich ihr Verhalten zu häufig und wird langfristig die Effizienz des Projekts und die Codeverwaltung beeinträchtigen. Wenn also andere Lösungen verwendet werden können, finden Sie sie.

CSS-Code-Formatregeln

Deklarationsreihenfolge

In alphabetischer Reihenfolge deklarieren.

Wenn alles in alphabetischer Reihenfolge deklariert wird, ist es leicht zu merken und zu warten.

Ignorieren Sie die browserspezifische Präfixreihenfolge, aber mehrere browserspezifische Präfixe für eine bestimmte CSS-Eigenschaft sollten relativ zueinander geordnet bleiben (z. B. -moz-Präfix vor -webkit).

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Einrückung von Codeblöcken

Rücke alle Inhalte in Codeblöcken (zwischen "{}") ein.

Rücke alleCodeblock-Inhalte ein, da dies die Klarheit der Hierarchie verbessert.

Deklarationsenden

Alle Deklarationen müssen mit ";" enden.

Füge aus Gründen der Konsistenz und Erweiterbarkeit am Ende jeder Deklaration ein Semikolon hinzu.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}
/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Enden von Eigenschaftsnamen

Füge nach dem Doppelpunkt des Eigenschaftsnamens ein Leerzeichen hinzu.

Füge aus Konsistenzgründen ein Leerzeichen zwischen Eigenschaftsnamen und Wert hinzu (nicht zwischen Eigenschaftsnamen und Doppelpunkt, wohlgemerkt).

/* 不推荐 */
h3 {
  font-weight:bold;
}
/* 推荐 */
h3 {
  font-weight: bold;
}

Zeilenumbrüche bei Selektoren und Deklarationen

Trenne Selektoren und Deklarationen durch Zeilen.

Jeder Selektor und jede Deklaration sollte in einer neuen Zeile stehen.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Zeilenumbrüche bei Regeln

Jede Regel in einer eigenen Zeile.

Lassen Sie zwischen zwei Regeln eine Leerzeile.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

CSS-Metadaten-Regeln

Kommentarbereich

Schreiben Sie Kommentare gruppenweise. (Optional)

Schreiben Sie, wenn möglich, einheitliche Kommentare für eine Gruppe von Stylesheets nach funktionaler Kategorie. Setzen Sie sie auf separate Zeilen.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Abschnitt zum Dampfablassen

Halten Sie sich an das Konsistenzprinzip

Wenn Sie Code bearbeiten möchten, nehmen Sie sich ein paar Minuten Zeit, um sich den Codestil anzusehen. Wenn er Dinge auf eine bestimmte Weise macht, sollten Sie dasselbe tun.

Mit einem einheitlichen Stil gibt es eine Umgebung des gemeinsamen Denkens, und Teilnehmer können sich darauf konzentrieren, was Sie sagen möchten, anstatt sich zuerst zu fragen, welche Sprache von welchem Planeten Sie sprechen. Obwohl wir hier einheitliche Stilregeln vorschlagen, dient dies nur dazu, allen davon zu erzählen und daraus zu lernen, den eigenen Stil anzupassen. Natürlich ist es auch wichtig, den eigenen einzigartigen Stil beizubehalten. Blabla...

Verwandte Ressourcen