Frontend-HTML-CSS-Styleguide

Inhaltsverzeichnis

Goldene Regel

Ein Projekt sollte immer denselben Satz an Coding-Standards befolgen!

Egal, wie viele Personen an demselben Projekt beteiligt sind, stelle sicher, dass jede Codezeile so aussieht, als wäre sie von derselben Person geschrieben worden.

HTML

Syntax

Verwende zwei Leerzeichen anstelle von Tabs — nur so ist eine konsistente Darstellung in allen Umgebungen garantiert.
Verschachtelte Elemente sollten einmal eingerückt werden (d. h. zwei Leerzeichen).
Verwenden Sie für Attributdefinitionen immer doppelte Anführungszeichen, niemals einfache Anführungszeichen.
Fügen Sie bei selbstschließenden Elementen keinen abschließenden Schrägstrich hinzu —die HTML5-Spezifikationgibt ausdrücklich an, dass dies optional ist.
Lassen Sie optionale schließende Tags nicht weg (zum Beispiel,</li>oder</body>）。

<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

HTML5 Doctype

Fügen Sie als erste Zeile jeder HTML-Seite eine Standardmodus-Deklaration hinzu, um eine konsistente Darstellung in jedem Browser sicherzustellen.

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Sprachattribut

Gemäß der HTML5-Spezifikation:

Es wird dringend empfohlen, das lang-Attribut am html-Wurzelelement anzugeben, um die korrekte Sprache für das Dokument festzulegen. Dies hilft Sprachsynthesewerkzeugen, die von ihnen zu verwendende Aussprache zu bestimmen, und Übersetzungswerkzeugen, die Regeln zu bestimmen, die sie beim Übersetzen befolgen sollten, unter anderem.

Mehr überlangdas Attribut kann ausdieser Spezifikationim Detail entnommen werden.

Hier aufgeführt ist dieSprachcode-Tabelle.。

<html lang="zh-CN">
  <!-- ... -->
</html>

IE-Kompatibilitätsmodus

IE unterstützt die Verwendung eines bestimmten<meta><meta>-Tag, um zu bestimmen, welche IE-Version zum Rendern der aktuellen Seite verwendet werden soll. Sofern keine zwingenden besonderen Anforderungen bestehen, ist es am besten, ihn aufEdge-Moduszu setzen, wodurch IE angewiesen wird, den neuesten von ihm unterstützten Modus zu verwenden.

Lesen Sie diesen Stack Overflow-Artikelfür weitere nützliche Informationen.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Zeichenkodierung

Durch die ausdrückliche Deklaration der Zeichenkodierung können Sie sicherstellen, dass Browser schnell und einfach bestimmen können, wie der Seiteninhalt gerendert werden soll. Der Vorteil besteht darin, dass dadurch die Notwendigkeit vermieden wird, Zeichen-Entitätsmarkierungen in HTML zu verwenden, wodurch die Konsistenz mit der Dokumentkodierung (im Allgemeinen UTF-8) erhalten bleibt.

<head>
  <meta charset="UTF-8">
</head>

Einbinden von CSS- und JavaScript-Dateien

Gemäß der HTML5-Spezifikation müssen Sie beim Einbinden von CSS- und JavaScript-Dateien im Allgemeinen nicht dastypetype-Attribut, weiltext/cssundtext/javascriptsie sind ihre jeweiligen Standardwerte.

HTML5-Spezifikationslinks

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Pragmatismus

Halte dich so weit wie möglich an HTML-Standards und -Semantik, aber opfere nicht die Praktikabilität. Versuche stets, so wenige Tags wie möglich zu verwenden und die Komplexität so gering wie möglich zu halten.

Attributreihenfolge

HTML-Attribute sollten in der unten angegebenen Reihenfolge angeordnet werden, um die Lesbarkeit des Codes zu gewährleisten.

class
id, name
data-*
src, for, type, href
title, alt
aria-*, role

class wird verwendet, um hochgradig wiederverwendbare Komponenten zu kennzeichnen, daher sollte es an erster Stelle stehen. id wird verwendet, um spezifische Komponenten zu kennzeichnen und sollte mit Vorsicht verwendet werden (z. B. seiteninterne Lesezeichen), daher steht es an zweiter Stelle.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Boolesche Attribute

Boolesche Attribute können ohne Wert deklariert werden. Die XHTML-Spezifikation erfordert einen Wert, die HTML5-Spezifikation jedoch nicht.

Weitere Informationen finden Sie unterWhatWG-Abschnitt zu booleschen Attributen：

Ein boolesches Attribut an einem Element ist wahr, wenn es einen Wert hat, und falsch, wenn es keinen Wert hat.

WennSie unbedingteinen Wert zuweisen müssen, ziehen Sie bitte die WhatWG-Spezifikation zu Rate:

Wenn das Attribut existiert, muss sein Wert entweder eine leere Zeichenkette oder der kanonische Name des Attributs sein, und es sollten keine nachfolgenden Leerzeichen hinzugefügt werden.

Einfach gesagt: Weisen Sie einfach keinen Wert zu.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Anzahl der Tags reduzieren

Vermeiden Sie beim Schreiben von HTML-Code nach Möglichkeit unnötige Elternelemente. Oft erfordert dies Iteration und Refactoring. Siehe das Beispiel unten:

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Von JavaScript generierte Tags

Von JavaScript generierte Tags machen Inhalte schwer zu finden und zu bearbeiten und reduzieren die Leistung. Vermeiden Sie sie, wenn möglich.

CSS

Syntax

Verwenden Sie zwei Leerzeichen anstelle von Tabs — dies ist die einzige Möglichkeit, eine konsistente Darstellung in allen Umgebungen zu garantieren.
Wenn Sie Selektoren gruppieren, platzieren Sie jeden einzelnen Selektor in eine eigene Zeile.
Fügen Sie zur Lesbarkeit des Codes ein Leerzeichen vor der öffnenden geschweiften Klammer jedes Deklarationsblocks ein.
Die schließende Klammer eines Deklarationsblocks sollte in einer eigenen Zeile stehen.
Auf die Deklarationsanweisung folgt:ein Doppelpunkt, gefolgt von einem Leerzeichen.
Um genauere Fehlerberichte zu erhalten, sollte jede Deklaration in einer eigenen Zeile stehen.
Alle Deklarationsanweisungen sollten mit einem Semikolon enden. Das Semikolon nach der letzten Deklaration ist optional, aber wenn Sie es weglassen, kann Ihr Code fehleranfälliger sein.
Fügen Sie bei durch Kommas getrennten Eigenschaftswerten nach jedem Komma ein Leerzeichen ein (zum Beispiel,box-shadow）。
Fügen Siergb()、rgba()、hsl()、hsla()oderrect()Fügen Sie ein Leerzeicheninnerhalbeines Werts nach einem Komma ein. Dies hilft, zwischen mehreren Eigenschaftswerten (Komma plus Leerzeichen) und mehreren Farbwerten (nur Komma, kein Leerzeichen) zu unterscheiden.
Lassen Sie bei Eigenschaftswerten oder Farbparametern die führende 0 bei Dezimalzahlen kleiner als 1 weg (zum Beispiel,.5anstelle von0.5；-.5pxanstelle von-0.5px）。
Hexadezimalwerte sollten durchgängig kleingeschrieben werden, zum Beispiel,#fff. Beim Scannen eines Dokuments sind Kleinbuchstaben leichter zu erkennen, da ihre Formen besser unterscheidbar sind.
Versuchen Sie, verkürzte Hexadezimalwerte zu verwenden, zum Beispiel verwenden Sie#fffanstelle von#ffffff。
Fügen Sie doppelte Anführungszeichen zu Attributen in Selektoren hinzu, zum Beispiel,input[type="text"]。ist nur in bestimmten Fällen optional, aber aus Gründen der Codekonsistenz wird empfohlen, immer doppelte Anführungszeichen zu verwenden.
Vermeiden Sie die Angabe von Einheiten bei Nullwerten, zum Beispiel verwenden Siemargin: 0;anstelle vonmargin: 0px;。

Haben Sie Fragen zu der hier verwendeten Terminologie? Bitte lesen Sie denAbschnitt Syntax des Wikipedia-Artikels „Cascading Style Sheets“.。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Deklarationsreihenfolge

Zugehörige Eigenschaftsdeklarationen sollten gruppiert und in der folgenden Reihenfolge angeordnet werden:

Positionierung
Box-Modell
Typografie
Visuell

Da Positionierung Elemente aus dem normalen Dokumentfluss entfernen und auch Box-Modell-bezogene Stile überschreiben kann, steht sie an erster Stelle. Das Box-Modell kommt an zweiter Stelle, weil es die Größe und Position von Komponenten bestimmt.

Andere Attribute wirken sich nur auf dasInnereder Komponente aus oder beeinflussen die ersten beiden Gruppen nicht, daher werden sie später platziert.

Die vollständige Liste der Eigenschaften und deren Reihenfolge finden Sie inRecess。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

Nicht verwenden`@import`

und<link>Im Vergleich zum <link>-Tag,@importDie @import-Direktive ist viel langsamer; sie fügt nicht nur zusätzliche Anfragen hinzu, sondern verursacht auch unvorhersehbare Probleme. Es gibt mehrere Alternativen:

Verwenden Sie mehrere<link>Elemente
Kompilieren Sie mehrere CSS-Dateien über einen CSS-Präprozessor wie Sass oder Less in eine einzige Datei.
Die von Rails, Jekyll oder anderen Systemen bereitgestellte CSS-Dateikonkatenationsfunktion

Bitte lesen SieSteve Souders’ Artikelfür weitere Informationen.

<!-- Use link elements -->
<link rel="stylesheet" href="core.css.html">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

Platzierung von Media Queries

Platzieren Sie Media Queries so nah wie möglich bei ihren zugehörigen Regeln. Fassen Sie sie nicht in einem einzigen Stylesheet oder am Ende des Dokuments zusammen. Wenn Sie sie trennen, geraten sie in Zukunft nur in Vergessenheit. Nachfolgend ein typisches Beispiel.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

Präfixierte Eigenschaften

Wenn Sie Eigenschaften mit anbieterspezifischem Präfix verwenden, rücken Sie so ein, dass der Wert jeder Eigenschaft vertikal ausgerichtet ist, was die Bearbeitung über mehrere Zeilen erleichtert.

Verwenden Sie in TextMateText → Edit Each Line in Selection(⌃⌘A). Verwenden Sie in Sublime Text 2Selection → Add Previous Line(⌃⇧↑) undSelection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

Einzeilige Regeldeklarationen

FürStile mit nur einer Deklarationwird empfohlen, die Anweisung für Lesbarkeit und schnelles Bearbeiten in eine Zeile zu setzen. Bei Stilen mit mehreren Deklarationen sollten die Deklarationen weiterhin über mehrere Zeilen aufgeteilt werden.

Der entscheidende Faktor ist die Fehlererkennung – zum Beispiel zeigt ein CSS-Validator einen Syntaxfehler in Zeile 183 an. Handelt es sich um eine einzelne Deklaration in einer einzelnen Zeile, werden Sie den Fehler nicht übersehen; gibt es mehrere Deklarationen in einer einzigen Zeile, müssen Sie sorgfältig analysieren, um den Fehler nicht zu übersehen.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

Deklarationen von Kurzschreibweise-Eigenschaften

In Fällen, in denen alle Werte explizit festgelegt werden müssen, versuchen Sie, die Verwendung von Shorthand-Eigenschaftsdeklarationen einzuschränken. Häufige Missbräuche von Shorthand-Eigenschaftsdeklarationen sind wie folgt:

padding
margin
font
background
border
border-radius

In den meisten Fällen müssen wir nicht alle Werte für Shorthand-Eigenschaftsdeklarationen angeben. Zum Beispiel müssen HTML-Überschriftenelemente nur die oberen und unteren Margin-Werte festlegen, also überschreiben Sie bei Bedarf einfach diese beiden Werte. Eine übermäßige Verwendung von Shorthand-Eigenschaftsdeklarationen kann zu unübersichtlichem Code führen und unerwartete Nebenwirkungen durch unnötige Überschreibungen von Eigenschaftswerten verursachen.

Ein sehr guter Artikel auf MDN (Mozilla Developer Network) überShorthand-Eigenschaftenist nützlich für Benutzer, die mit Shorthand-Eigenschaftsdeklarationen und ihrem Verhalten nicht vertraut sind.

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

Verschachtelung in Less und Sass

Vermeiden Sie unnötige Verschachtelung. Denn obwohl Sie Verschachtelung verwenden können, heißt das nicht, dass Sie es sollten. Verwenden Sie Verschachtelung nur, wenn Sie Stile auf ein übergeordnetes Element beschränken müssen (d. h. Nachfahrenselektoren) und mehrere Elemente verschachtelt werden müssen.

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

Kommentare

Code wird von Menschen geschrieben und gepflegt. Stellen Sie sicher, dass Ihr Code selbsterklärend, gut kommentiert und für andere leicht verständlich ist. Gute Codekommentare vermitteln Kontext und Zweck. Wiederholen Sie nicht einfach Komponenten- oder Klassennamen.

Schreiben Sie für längere Kommentare vollständige Sätze; für allgemeine Anmerkungen sind prägnante Formulierungen akzeptabel.

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

class-Namensgebung

Klassennamen sollten nur Kleinbuchstaben und Bindestriche enthalten (keine Unterstriche oder CamelCase). Bindestriche sollten für die Benennung zusammengehöriger Klassen verwendet werden (ähnlich wie Namespaces) (z. B.,.btnund.btn-danger）。
Vermeiden Sie allzu Willkürliche Abkürzungen..btnrepräsentiertbutton, aber.svermittelt keine Bedeutung.
Klassennamen sollten so kurz wie möglich und klar aussagekräftig sein.
Verwenden Sie aussagekräftige Namen. Verwenden Sie organisatorische oder zweckbezogene Namen, nicht darstellungsbezogene Namen.
Verwenden Sie die nächstgelegene Elternklasse oder Basisklasse als Präfix für neue Klassen.
Verwenden Sie.js-*Klassen zur Kennzeichnung von Verhalten (im Gegensatz zu Stil) verwenden und diese Klassen nicht in CSS-Dateien aufnehmen.

Beim Benennen von Sass- und Less-Variablen kann man auch die oben aufgeführten Spezifikationen heranziehen.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Selektoren

Verwende Klassen für gemeinsame Elemente, was vorteilhaft für die Optimierung der Rendering-Leistung ist.
Vermeide Attributselektoren für häufig vorkommende Komponenten (z. B.[class^="..."]). Die Browser-Leistung wird durch diese Faktoren beeinträchtigt.
Halte Selektoren so kurz wie möglich und begrenze die Anzahl der Elemente in einem Selektor, vorzugsweise auf nicht mehr als 3.
Nurbeschränke Klassen auf das nächstgelegene Elternelement, wenn nötig (d. h. Nachfahrenselektoren) (zum Beispiel, wenn keine präfixierten Klassen verwendet werden – Präfixe ähneln Namensräumen).

Weiterführende Lektüre:

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Codeorganisation

Organisieren Sie Code-Abschnitte nach Komponenten.
Etabliere einheitliche Kommentar-Konventionen.
Verwende konsistente Leerzeichen, um Code in Blöcke zu unterteilen, was das Überfliegen größerer Dokumente erleichtert.
Wenn mehrere CSS-Dateien verwendet werden, teile sie nach Komponenten statt nach Seiten auf, da Seiten neu organisiert werden können, während Komponenten nur verschoben werden.

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

Editor-Konfiguration

Konfiguriere deinen Editor wie folgt, um häufige Code-Inkonsistenzen und Unterschiede zu vermeiden:

Verwende zwei Leerzeichen anstelle von Tabs (Soft-Tab, d. h. Leerzeichen stellen Tabulatorzeichen dar).
Entfernen Sie beim Speichern von Dateien nachfolgende Leerzeichen.
Legen Sie die Dateikodierung auf UTF-8 fest.
Fügen Sie am Ende der Datei eine Leerzeile hinzu.

Lesen Sie die Dokumentation und fügen Sie diese Konfigurationsinformationen zur.editorconfigDatei des Projekts hinzu. Zum Beispiel:Ein .editorconfig-Beispiel von Bootstrap. Weitere Informationen finden Sie unterzu EditorConfig。