Latest web development tutorials

Bootstrap CSS Coding Standards

Grammatik

  • Mit zwei Räumen statt Tabs (Reiter) - Dies ist der einzige Weg, um einen einheitlichen Ansatz zu gewährleisten, alle Umgebungen zu zeigen.
  • Wenn der Wähler separat auf einem Zeilenwähler gruppiert.
  • Für die Lesbarkeit des Codes, vor dem Block jede Anweisung Klammer ein Leerzeichen hinzuzufügen.
  • Brace Blockanweisung allein sollte die Reise zu machen.
  • Jede Aussage ist die Aussage : nach ein Leerzeichen einfügen sollte.
  • Um eine genauere Fehlerberichterstattung zu erhalten, sollte jede Aussage eine separate Leitung sein.
  • Alle Erklärung Anweisung sollte mit einem Semikolon enden. Semikolon hinter letzte Erklärung Anweisung ist optional, aber wenn Sie das Semikolon, Ihr Code weglassen kann falscher sein.
  • Für Immobilienwerte durch Komma getrennt, sollte jedes Komma in einen Raum eingefügt werden (zB box-shadow ).
  • Nicht rgb() , rgba() , hsl() , hsla() oder rect() hinter den internen Werte Komma ein Leerzeichen einfügen. Diese Leistungen aus einer Vielzahl von Attributwerten (auch beide comma und Raum) zwischen einer Vielzahl von Farbwerten (nur ein Komma, keine Leerzeichen) zu unterscheiden.
  • Für die Farbattributwert oder Parameter nicht weniger als 1 vor dem Komma 0 (zum Beispiel .5 anstelle von 0.5 ; -.5px ersetzt -0.5px ).
  • Hexadezimal - Werte sollten alle Klein zum Beispiel sein #fff . Wenn Sie ein Dokument scannen, Kleinbuchstaben leicht zu unterscheiden, weil ihre Form leichter unterscheidbar ist.
  • Versuchen Sie, eine Kurzform des hexadezimalen Wert zu verwenden, zum Beispiel mit #fff anstelle von #ffffff .
  • Fügen Sie doppelte Anführungszeichen für die Auswahl einer Immobilie, zum Beispiel input[type="text"] . Nur unter bestimmten Umständen ist es optional , aber für Konsistenz Code Vorschläge in doppelte Anführungszeichen.
  • 0 Einheiten auf den angegebenen Wert zu vermeiden, zum Beispiel mit einem margin: 0; anstelle von margin: 0px; .

Für hier verwendete Begriffe haben Fragen? Bitte beachten Sie Wikipedia auf Cascading Style Sheets - Grammatik . 

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

Erklärung bestellen

Objektbezogene Aussagen sollten in der folgenden Reihenfolge gruppiert und angeordnet werden:

  1. Positionierung
  2. Box-Modell
  3. typografisch
  4. visuell

Da die Positionierung (Positionierung) kann das Element aus dem normalen Dokumentenfluss zu entfernen, und auch das Box-Modell abdecken (Box-Modell) auf Stil bezogen, so dass in der ersten Reihe. Das Box-Modell auf dem zweiten Platz, weil sie bestimmt die Größe und Position der Komponenten.

Andere Eigenschaften wirken sich nur auf die internen Komponenten (innen) oder wirkt sich nicht auf die ersten beiden Gruppen zuzuschreiben, so auf der Rückseite.

Die komplette Liste der Eigenschaften und deren Reihenfolge zu verweisen Recess . 

.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 Tag, @import viel langsamer Befehl, erhöht sich nicht nur die Anzahl der zusätzlichen Anforderungen, sondern auch zu unerwarteten Problemen führen. Es gibt mehrere Alternativen:

  • Die Verwendung mehrerer <link> Element
  • Durch Sass oder weniger wie CSS Präprozessor mehrere CSS-Dateien werden in einer Datei zusammengestellt
  • Durch Rails, Jekyll oder einem anderen System zur Verfügung gestellt, die CSS-Datei Merge-Funktion

Siehe Steve Souders Artikel , um mehr Wissen zu lernen. 

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

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

Medienanfragen (Medienabfrage) Position

Die Medien-Anfragen so nah an den einschlägigen Regeln gesetzt. Sie sie nicht in einem einzigen Stil-Datei oder am unteren Rand des Dokuments packen. Wenn Sie sie auseinander nehmen und in Zukunft jeder wird vergessen. Hier ist ein typisches Beispiel. 

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

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

Mit Attributen Präfix

Bei der Verwendung von herstellerspezifischen Attribute durch Einrücken Präfix, die den Wert jeder Eigenschaft ermöglicht in vertikaler Richtung ausgerichtet sind, ist es einfach zu Multi-Line-Bearbeitung.

In Textmate, mit Text → Bearbeiten Jede Zeile Auswahl ( ^ ⌘A). In Sublime Text 2 verwenden → die Auswahl hinzufügen vorherige Zeile (^ ⇧ ↑ ) und Auswahl → Hinzufügen nächste Zeile (^ ⇧ ↓ ). 

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

Einzeiliger Regel Erklärung

Für Arten , die nur eine Aussage, enthalten , um die Lesbarkeit und die schnelle Bearbeitung zu erleichtern, empfehlen wir , dass die Erklärung auf der gleichen Linie. Für eine Reihe von Arten mit einer Erklärung oder Aussage sollte in mehrere Zeilen aufgeteilt werden.

Ein wichtiger Faktor dabei ist, Fehler zu erkennen - zum Beispiel CSS-Validator wies darauf hin, dass 183 Zeile einen Syntaxfehler hat. Wenn es sich um eine einzeilige einzelne Anweisung ist, werden Sie diesen Fehler nicht ignorieren, wenn es mehr als eine einzeilige Anweisung ist, müssen Sie sorgfältig die Fehler zu analysieren, um fehlende 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; }

Stenografie Eigenschaftsdeklarationen

In der Notwendigkeit, explizit den Wert aller Fälle zu setzen, sollten wir versuchen, die Verwendung von Kurzschrift-Eigenschaft Erklärungen zu begrenzen. Situation häufig mißbraucht Kurzschrift-Eigenschaft wie folgt deklariert:

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

In den meisten Fällen brauchen wir nicht alle Werte für das Attribut Erklärung abgekürzt angeben. Zum Beispiel HTML-Elemente nur auf dem Set oberen und unteren Rand (Margin) Wert, also bei Bedarf einfach abdecken diese beiden Werte können Überschrift sein. Der übermäßige Gebrauch der Kurzform der Eigenschaftsdeklaration kann zu verwirrenden Code, Eigenschaftswert führen und unnötige Überschneidungen verursachen unerwartete Nebenwirkungen bringen würde.

MDN (Mozilla Developer Network) auf eine sehr gute Idee , über Stenografie Eigenschaften des Artikels, für die weniger bekannten Kurzschrift - Eigenschaft Erklärung und des Nutzerverhaltens ist nützlich. 

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

Weniger und Sass verschachtelt

Vermeiden Sie unnötige Verschachtelung. Dies liegt daran, obwohl Sie das Nest verwenden können, aber das bedeutet nicht, Sie verschachtelte verwenden sollten. Nur im Stil müssen Sie innerhalb des übergeordneten Elements begrenzen (dh Nachkomme Selektor) und müssen nur eine Vielzahl von verschachtelten Elementen mit geschachtelten existieren. 

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

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

Note

Der Code wird von den Menschen geschrieben und gepflegt. Bitte stellen Sie sicher, dass Ihr Code selbsterklärend sein kann, gut kommentiert und leicht, andere zu verstehen. Guter Code Kommentare können Kontext und Zweck des Codes vermitteln. Nicht einfach Komponente oder Klassennamen wiederholen.

Für längere Kommentare, sollten Sie einen vollständigen Satz zu schreiben, für die allgemeine Kommentare können einfache Sätze schreiben. 

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

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

Klassenname

  • Klassennamen können nur Kleinbuchstaben und Bindestriche (dashe) (nicht unterstrichen, noch Buckel-Nomenklatur) erscheinen. Dash sollte für die betreffende Klasse verwendet werden genannt (wie Namespaces) (zum Beispiel .btn und .btn-danger ).
  • Vermeiden Sie übermäßige willkürliche Stenografie. .btn Vertreter Taste, aber .s irgendeine Bedeutung nicht ausdrücken.
  • Klassenname sollte so kurz und klare Bedeutung sein.
  • Verwenden Sie aussagekräftige Namen. Organisierte oder gezielte Verwendung des Namens, nicht Ausdrücke (Präsentations-) Namen verwenden.
  • Basierend auf den nächsten übergeordneten Klasse oder einfach (Basis) Klasse als Präfix für die neue Klasse.
  • Verwenden Sie .js-* Klasse , das Verhalten zu identifizieren (im Gegensatz zu Stil im Gegensatz) und enthalten keine diese Klasse in die CSS - Datei.

Sass und weniger für Variablennamen wird auch gelesen, alle oben aufgeführten Spezifikationen. 

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

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

Wähler

  • Für gemeinsame Elemente Klasse zu verwenden, so förderlich Rendering-Leistung zu optimieren.
  • Für Bauteile vermeiden oft die Eigenschaft Selektoren (zB [class^="..."] ). Browser-Leistung wird durch diese Faktoren beeinflusst werden.
  • Selektoren so kurz wie möglich, und versuchen, die Anzahl der Elemente des Wählers zu begrenzen, wird empfohlen, nicht mehr als 3 zu überschreiten.
  • Nur wenn es notwendig ist , in der letzten Klasse des übergeordneten Elements (dh Nachkomme Selektor) zu begrenzen (Verwenden Sie zum Beispiel nicht die Klasse mit dem Präfix - Namespacepräfix ähnlich ist).

Lesen Sie auch: 

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

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

Code Organisation

  • Component-Einheit Organisationscode.
  • Entwicklung einer einheitlichen Annotation-Spezifikation.
  • Verwenden Sie konsistente Leerzeichen in Code-Blöcke getrennt, so förderlich große Dokumente zu scannen.
  • Wenn mehr als eine CSS-Datei, die in Form von Spin-off Baugruppe anstatt der Seite, da die Seite neu geordnet werden, und die Anordnung wird bewegbar. 
/*
 * 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 { ... }

Konfigurationseditor

Der Editor in Übereinstimmung mit den folgenden Konfigurationseinstellungen gemeinsamen Code Inkonsistenzen und Unterschiede zu vermeiden:

  • Zwei Räume statt Tabs (Soft-Registerkarte, die repräsentativ für Tab-Zeichen mit Leerzeichen ist).
  • Wenn Sie eine Datei speichern Sie die nachfolgende Leerzeichen zu entfernen.
  • Stellen Sie die Datei-Kodierung UTF-8.
  • Am Ende der Datei eine leere Zeile hinzufügen.

Mit Bezug auf das Dokument und fügen Sie die Konfigurationsinformationen zum Projekt .editorconfig Datei. Zum Beispiel: auf Bootstrap in .editorconfig Instanz . Weitere Informationen finden Sie in der Über EditorConfig .