Bootstrap CSS-Codierungsstandards

Syntax

  • Verwenden Sie zwei Leerzeichen anstelle von Tabs – dies ist der einzige Weg, um eine konsistente Darstellung in allen Umgebungen zu gewährleisten.
  • Wenn Sie Selektoren gruppieren, platzieren Sie jeden einzelnen Selektor in eine eigene Zeile.
  • Fügen Sie zur besseren Lesbarkeit vor der öffnenden Klammer jedes Deklarationsblocks ein Leerzeichen ein.
  • Die schließende Klammer eines Deklarationsblocks sollte in einer eigenen Zeile stehen.
  • Auf die Deklarationsanweisung folgt:ein Doppelpunkt, gefolgt von einem Leerzeichen.
  • Für eine genauere Fehlerberichterstattung sollte sich jede Deklaration in einer eigenen Zeile befinden.
  • Alle Deklarationsanweisungen sollten mit einem Semikolon enden. Das Semikolon nach der letzten Deklaration ist optional, aber das Weglassen kann Ihren Code fehleranfälliger machen.
  • Fügen Sie bei kommaseparierten Eigenschaftswerten nach jedem Komma ein Leerzeichen ein (z. B.box-shadow）。
  • Fügen Siergb()、rgba()、hsl()、hsla()oderrect()innerhalb eines WerteskeinLeerzeichen nach dem Komma ein. Dies hilft dabei, mehrere Farbwerte (Kommata ohne Leerzeichen) von mehreren Eigenschaftswerten (Kommata mit Leerzeichen) zu unterscheiden.
  • Lassen Sie bei Eigenschaftswerten oder Farbparametern die führende 0 bei Dezimalzahlen kleiner als 1 weg (z. B..5anstelle von0.5；-.5pxanstelle von-0.5px）。
  • Hexadezimalwerte sollten lowercase sein, z. B.#fffBeim Scannen von Dokumenten sind lowercase-Zeichen leichter zu unterscheiden, da ihre Formen prägnanter sind.
  • Verwenden Sie nach Möglichkeit verkürzte Hexadezimalwerte, z. B. verwenden Sie#fffanstelle von#ffffff。
  • Fügen Sie Attributen in Selektoren doppelte Anführungszeichen hinzu, z. B.input[type="text"]。Anführungszeichen sind nur in bestimmten Fällen optional.Aus Gründen der Konsistenz wird jedoch empfohlen, immer doppelte Anführungszeichen zu verwenden.
  • Vermeiden Sie die Angabe von Einheiten für Nullwerte, z. B. verwenden Siemargin: 0;anstelle vonmargin: 0px;。

Fragen zur hier verwendeten Terminologie? Siehe WikipediasCascading Style Sheets - Syntax。

/* 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:

  1. Positionierung
  2. Box-Modell
  3. Typografie
  4. Visuell

Die Positionierung kann Elemente aus dem normalen Dokumentfluss entfernen und Stile des Box-Modells überschreiben, daher wird sie an erster Stelle platziert. Das Box-Modell kommt an zweiter Stelle, da es die Größe und Position einer Komponente bestimmt.

Andere Eigenschaften beeinflussen nur das Innere der Komponenteinsideoder beeinflussen die ersten beiden Gruppen nicht, weshalb sie später platziert werden.

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;
}

Verwenden Sie keine@import

und<link>Verglichen mit dem Tag@importsind Direktiven viel langsamer, erzeugen nicht nur zusätzliche Anfragen, sondern verursachen auch unvorhersehbare Probleme. Alternativen umfassen:

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

Weitere Informationen finden Sie inSteve Souders' Artikel.

<!-- 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 an den zugehörigen Regeln. Packen Sie sie nicht in ein einziges Stylesheet oder an das Ende des Dokuments. Wenn Sie sie trennen, werden sie in Zukunft nur vergessen. Ein typisches Beispiel ist unten angegeben.

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

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

Mit Präfix versehene Eigenschaften

Wenn Sie Herstellerspezifische Präfixe (Vendor-Präfixe) verwenden, rücken Sie diese so ein, dass der Wert jeder Eigenschaft vertikal ausgerichtet ist, was die Bearbeitung über mehrere Zeilen hinweg 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ür Stile, die nur eine Deklaration enthalten, wird empfohlen, die Anweisungen aus Gründen der Lesbarkeit und schnellen Bearbeitung in dieselbe Zeile zu schreiben. Bei Stilen mit mehreren Deklarationen sollten die Deklarationen dennoch auf mehrere Zeilen aufgeteilt werden.

Der Schlüsselfaktor hierbei ist die Fehlererkennung – zum Beispiel weist ein CSS-Validator auf einen Syntaxfehler in Zeile 183 hin. Handelt es sich um eine einzelne Deklaration in einer Zeile, werden Sie den Fehler nicht übersehen; handelt es sich um mehrere Deklarationen in einer Zeile, müssen Sie sorgfältig analysieren, um das Übersehen von Fehlern zu vermeiden.

/* 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; }

Kurzschreibweisen für Eigenschaftsdeklarationen

Wenn Sie alle Werte explizit festlegen müssen, sollten Sie versuchen, die Verwendung von Kurzschreibweisen für Eigenschaftsdeklarationen einzuschränken. Häufige Fälle von Missbrauch von Kurzschreibweisen sind folgende:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

In den meisten Fällen müssen wir nicht alle Werte für Kurzschreibweisen angeben. Beispielsweise müssen HTML-Überschriftenelemente nur die oberen und unteren Randwerte festlegen; überschreiben Sie daher bei Bedarf nur diese beiden Werte. Die Überstrapazierung von Kurzschreibweisen kann zu Codeverwirrung und unnötigen Überschreibungen von Eigenschaftswerten führen, was unerwartete Nebenwirkungen zur Folge hat.

MDN (Mozilla Developer Network) hat einen ausgezeichneten Artikel überKurzschreibe-Eigenschaften, der für Anwender, die mit Kurzschreibweisen und deren Verhalten nicht vertraut sind, sehr nützlich ist.

/* 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 Verschachtelungen. Das liegt daran, dass man zwar Verschachtelungen verwenden kann, aber nicht sollte. Verwenden Sie Verschachtelungen nur dann, wenn Sie Stile auf ein Elternelement einschränken müssen (d. h. Nachfahrenelektoren) und es mehrere Elemente gibt, die eine Verschachtelung erfordern.

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

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

Kommentare

Code wird von Menschen geschrieben und gewartet. Bitte 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 nur Komponenten- oder Klassennamen.

Achten Sie bei längeren Kommentaren darauf, vollständige Sätze zu schreiben; für allgemeine Anmerkungen sind prägnante Phrasen akzeptabel.

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

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

Klassennamen

  • Klassennamen sollten nur Kleinbuchstaben und Bindestriche enthalten (keine Unterstriche, kein 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 organisierte oder zweckorientierte Namen, keine darstellenden 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 Stilen), und fügen Sie diese Klassen nicht in CSS-Dateien ein.

Sie können sich bei der Benennung von Sass- und Less-Variablen auch auf die oben genannten Spezifikationen beziehen.

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

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

Selektoren

  • Verwenden Sie Klassen für generische Elemente, was für die Optimierung der Render-Leistung vorteilhaft ist.
  • Vermeiden Sie bei häufig vorkommenden Komponenten Attributselektoren (z. B.[class^="..."]). Die Browser-Leistung wird durch diese Faktoren beeinträchtigt.
  • Selektoren sollten so kurz wie möglich sein, und versuchen Sie, die Anzahl der Elemente, aus denen ein Selektor besteht, zu begrenzen; es wird empfohlen, 3 nicht zu überschreiten.
  • Nurwenn unbedingt erforderlich, sollten Sie die Klasse auf das nächstgelegene Elternelement beschränken (d. h. Nachfahrenelektoren) (z. B. wenn keine präfixbasierten Klassen verwendet werden -- das Präfix ähnelt einem Namespace).

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 { ... }

Code-Organisation

  • Organisieren Sie Code-Abschnitte nach Komponenten.
  • Etablieren Sie konsistente Konventionen für Kommentare.
  • Verwenden Sie einheitliche Leerzeichen, um Code in Blöcke zu unterteilen, was das Durchsuchen großer Dokumente erleichtert.
  • Wenn Sie mehrere CSS-Dateien verwenden, teilen Sie diese nach Komponenten statt nach Seiten auf, da Seiten möglicherweise neu organisiert werden, 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

Konfigurieren Sie Ihren Editor wie folgt, um häufige Code-Inkonsistenzen und Diffs zu vermeiden:

  • Verwenden Sie zwei Leerzeichen anstelle von Tabs (Soft-Tab, d. h. Leerzeichen statt Tabulatoren).
  • Entfernen Sie beim Speichern von Dateien nachgestellte Leerzeichen.
  • Setzen Sie die Dateikodierung auf UTF-8.
  • Fügen Sie am Ende der Datei eine Leerzeile hinzu.

Beziehen Sie sich auf die Dokumentation und fügen Sie diese Konfigurationseinstellungen dem.editorconfig-Projekt hinzu. Zum Beispiel:Das .editorconfig-Beispiel in Bootstrap. Weitere Informationen finden Sie unterüber EditorConfig。

Weitere Erweiterungen