Bootstrap CSS normes de codage

Précédent: Bootstrap HTML conventions de codage

grammaire

Avec deux places au lieu des onglets (onglet) - Ceci est le seul moyen d'assurer une approche cohérente pour montrer dans tous les environnements.
Lorsque le sélecteur est groupé séparément sur un sélecteur de ligne.
Pour la lisibilité du code, en face du bloc chaque accolade déclaration pour ajouter un espace.
instruction de bloc de Brace seul devrait faire le voyage.
Chaque déclaration est la déclaration : après doit insérer un espace.
Afin d'obtenir des rapports d'erreur plus précis, chaque énoncé doit être une ligne distincte.
Tout énoncé de déclaration devrait se terminer par un point-virgule. Semicolon derrière la dernière instruction de déclaration est facultative, mais si vous omettez le point-virgule, votre code peut être plus faux.
Pour les valeurs de propriété séparées par des virgules, chaque virgule doit être insérée dans un espace (par exemple, box-shadow ).
Ne pas rgb() , rgba() , hsl() , hsla() ou rect() derrière les valeurs internes virgule insérer un espace. Ces avantages d'une pluralité de valeurs d'attribut (aussi à la fois une virgule et de l'espace) pour distinguer entre une pluralité de valeurs de couleurs (seulement une virgule, sans espace).
Pour la valeur d'attribut de couleur ou paramètre omis moins de 1 en face de la virgule 0 (par exemple, .5 au lieu de 0.5 ; -.5px remplacé -0.5px ).
Les valeurs hexadécimales doivent être en minuscules, par exemple, #fff . Lors de la numérisation d'un document, les caractères minuscules faciles à distinguer, parce que leur forme est plus facile à distinguer.
Essayez d'utiliser une forme courte de la valeur hexadécimale, par exemple, avec #fff au lieu de #ffffff .
Ajouter des guillemets doubles pour la sélection d'une propriété, par exemple, input[type="text"] . Seulement dans certaines circonstances , il est facultatif , cependant, pour des propositions de code de cohérence entre guillemets.
0 unités à la valeur spécifiée pour éviter, par exemple, avec une margin: 0; au lieu de la margin: 0px; .

Pour les termes utilisés ici ont des questions? S'il vous plaît se référer à Wikipedia sur Cascading Style Sheets - grammaire .

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

Déclaration de l'ordre

déclarations relatives à la propriété doivent être regroupés et disposés dans l'ordre suivant:

placement
modèle de Box
typographique
visuel

Comme le positionnement (positionnement) peut retirer l'élément du flux normal du document, et également couvrir le modèle de boîte (modèle de boîte) en lien avec style, donc dans la première rangée. Le modèle de boîte à la deuxième place, car elle détermine la taille et la position des composants.

D' autres propriétés affectent uniquement les composants internes ( à l' intérieur) ou ne modifient pas les deux premiers groupes d' attributs, de sorte à l'arrière.

Liste complète des propriétés et leur ordre se référer à 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;
}

Ne pas utiliser `@import`

Et <link> tag rapport, @import commande beaucoup plus lente, non seulement augmente le nombre de demandes supplémentaires, mais aussi conduire à des problèmes inattendus. Il existe plusieurs alternatives:

Utilisation multiple <link> élément
Par Sass ou moins comme plusieurs fichiers CSS CSS préprocesseur sont compilés en un seul fichier
Par Rails, Jekyll ou un autre système à condition que le fichier fonctionnalité de fusion de CSS

Reportez - vous à l' article Steve Souders pour apprendre plus de connaissances.

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

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

requêtes des médias position (Media requête)

Les requêtes des médias placés au plus près des règles pertinentes. Ne pas les emballer dans un fichier de style unique, ou au bas du document. Si vous les prenez à part, et à l'avenir tout le monde sera oublié. Voici un exemple typique.

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

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

Avec attributs préfixe

Lors de l'utilisation des attributs spécifiques au fournisseur préfixés par indentation, qui permet à la valeur de chaque propriété sont alignés dans la direction verticale, il est facile à l'édition multi-ligne.

Dans TextMate, en utilisant texte → Modifier chaque ligne de sélection ( ^ ⌘A). Dans Sublime Text 2, utilisez la sélection → Ajouter la ligne précédente (^ ⇧ ↑ ) et Sélection → Ajouter une ligne suivante (^ ⇧ ↓ ).

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

Single-line déclaration de règle

Pour les styles qui contiennent seulement une déclaration, afin de faciliter la lisibilité et l' édition rapide, nous recommandons que la déclaration sur la même ligne. Pour un certain nombre de styles avec une déclaration ou une déclaration doit être divisée en plusieurs lignes.

Un facteur clé dans le faire est de détecter les erreurs - par exemple, validateur CSS fait remarquer que 183 ligne a une erreur de syntaxe. Si elle est une déclaration unique unique en ligne, vous ne serez pas ignorer cette erreur, si elle est plus qu'une seule déclaration en ligne, vous devez analyser soigneusement les erreurs à ne pas manquer.

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

déclarations de propriétés raccourcies

Dans la nécessité de définir explicitement la valeur de tous les cas, nous devrions essayer de limiter l'utilisation de déclarations de propriétés abrégées. Situation couramment abusé propriété raccourcie déclarée comme suit:

padding
margin
font
background
border
border-radius

Dans la plupart des cas, on n'a pas besoin de spécifier toutes les valeurs pour la forme abrégée de déclaration d'attribut. Par exemple, HTML rubrique éléments seulement sur l'ensemble marges supérieure et inférieure (marge) valeur, donc, si nécessaire, juste couvrant ces deux valeurs peut être. L'utilisation excessive de la forme courte de la déclaration de propriété peut conduire à un code source de confusion, la valeur de la propriété et entraînerait des chevauchements inutiles causant des effets secondaires inattendus.

MDN (développeur Network Mozilla) sur une très bonne idée sur les propriétés raccourcies de l'article, pour le comportement sténographie moins familier de déclaration de propriété et l' utilisateur est utile.

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

Moins et Sass imbriqué

Évitez la nidification inutile. En effet, bien que vous pouvez utiliser le nid, mais cela ne signifie pas que vous devez utiliser imbriqué. Seulement dans le style que vous devez limiter dans l'élément parent (ie descendant de sélection), et besoin que d'une pluralité d'éléments imbriqués en utilisant imbriqué existent.

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

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

note

Le code est écrit et maintenu par le peuple. faire S'il vous plaît assurer que votre code peut être auto-description, bien commenté et facile à comprendre les autres. De bons commentaires de code peuvent transmettre le contexte et le but du code. Ne pas simplement réitérer le composant ou le nom de la classe.

Pour plus de commentaires, assurez-vous d'écrire une phrase complète, pour les commentaires généraux, peut écrire des phrases simples.

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

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

nom de la classe

les noms de classe peuvent apparaître uniquement des caractères minuscules et des tirets (Dashe) (non soulignés, ni nomenclature hump). Dash doit être utilisé pour la classe nommée (comme namespaces) (par exemple, .btn et .btn-danger ).
Évitez raccourci arbitraire excessive. .btn représentants bouton, mais .s pas exprimer toute signification.
nom de la classe doit être aussi courte et signification claire.
Utilisez des noms significatifs. utilisation organisée ou délibérée du nom, ne pas utiliser des expressions (présentation) nom.
Sur la base de la classe parent le plus proche ou (base) de classe de base comme préfixe pour la nouvelle classe.
Utilisez .js-* classe pour identifier le comportement (par opposition au style), et ne contiennent pas ces classes dans le fichier CSS.

Sass et moins pour nommer les variables sont lues également toutes les spécifications ci-dessus.

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

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

sélecteur

Pour les éléments communs utilisent la classe, si propice pour optimiser les performances de rendu.
Pour les composants évitent souvent en utilisant les sélecteurs de propriété (par exemple, [class^="..."] ). la performance du navigateur sera affectée par ces facteurs.
Sélecteurs aussi courte que possible, et d'essayer de limiter le nombre d'éléments du sélecteur, il est recommandé de ne pas dépasser 3.
Seulement quand il est nécessaire de limiter dans la dernière classe de l'élément parent (ie descendant sélecteur) (Par exemple, ne pas utiliser la classe avec le préfixe - préfixe d'espace de noms est similaire).

Lectures complémentaires:

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

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

code de l'organisation

Composant-unité de code d'organisation.
Développement de la spécification de la cohérence des annotations.
Utilisez des espaces cohérents séparés en blocs de code, si propice à numériser des documents volumineux.
Si plus d'un fichier CSS, sous la forme d'assemblage de spin-off plutôt que la page, parce que la page sera réorganisée, et l'ensemble sera déplacé.

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

Configuration Editor

Votre rédacteur en conformité avec les paramètres de configuration suivants pour éviter les incohérences et les différences de code communes:

Deux places au lieu des onglets (soft-onglet qui est représentatif des caractères de tabulation avec des espaces).
Lorsque vous enregistrez un fichier à supprimer l'espace de fuite.
Définir le fichier encodage UTF-8.
A la fin du fichier ajouter une ligne vide.

Se référant au document et ajouter les informations de configuration pour le projet .editorconfig fichier. Par exemple: le Bootstrap en instance .editorconfig . Pour plus d' informations, s'il vous plaît se référer à la A propos de EditorConfig .

Précédent: Bootstrap HTML conventions de codage

Bootstrap cours

Bootstrap CSS

Bootstrap Composants de mise en page

Bootstrap Widget

Bootstrap autre

Bootstrap CSS normes de codage

grammaire

Déclaration de l'ordre

Ne pas utiliser `@import`

requêtes des médias position (Media requête)

Avec attributs préfixe

Single-line déclaration de règle

déclarations de propriétés raccourcies

Moins et Sass imbriqué

note

nom de la classe

sélecteur

code de l'organisation

Configuration Editor

Bootstrap cours

Bootstrap CSS

Bootstrap Composants de mise en page

Bootstrap Widget

Bootstrap autre

Bootstrap CSS normes de codage

grammaire

Déclaration de l'ordre

Ne pas utiliser @import

requêtes des médias position (Media requête)

Avec attributs préfixe

Single-line déclaration de règle

déclarations de propriétés raccourcies

Moins et Sass imbriqué

note

nom de la classe

sélecteur

code de l'organisation

Configuration Editor

Ne pas utiliser `@import`