Spécifications de codage CSS Bootstrap

Syntaxe

Utilisez deux espaces au lieu de tabulations - c'est le seul moyen de garantir une présentation cohérente dans tous les environnements.
Lorsque vous regroupez des sélecteurs, placez les sélecteurs individuels sur leur propre ligne.
Pour la lisibilité du code, ajoutez un espace avant l'accolade ouvrante de chaque bloc de déclaration.
L'accolade fermante d'un bloc de déclaration doit être sur sa propre ligne.
Un espace doit être inséré après le : de chaque déclaration.
Pour un rapport d'erreurs plus précis, chaque instruction doit figurer sur sa propre ligne.
Toutes les déclarations doivent se terminer par un point-virgule. Le point-virgule après la dernière instruction de déclaration est facultatif, mais si vous l'omettez, votre code peut être plus sujet aux erreurs.
Pour les valeurs d'attribut séparées par des virgules, un espace doit être inséré après chaque virgule (par exemple, box-shadow).
N'insérez pas d'espaces après les virgules à l'intérieur de rgb() des valeurs rgba(), hsl(), hsla(), rect() ou . Cela permet de distinguer plusieurs valeurs de couleur (uniquement des virgules, pas d'espaces) de plusieurs valeurs d'attribut (virgules et espaces).
Pour les valeurs d'attribut ou les paramètres de couleur, omettez le premier 0 pour les décimales inférieures à 1 (par exemple,
au lieu de .5 ; 0.5 au lieu de -.5px ). -0.5px
Les valeurs hexadécimales doivent être toutes en minuscules, par exemple
. Les caractères minuscules sont plus faciles à lire lors de la numérisation d'un document car leur forme est plus facile à distinguer. #fff
Essayez d'utiliser des valeurs hexadécimales abrégées, par exemple, utilisez
au lieu de #fff. #ffffff
Ajoutez des guillemets doubles aux attributs dans le sélecteur, par exemple
. Ce n'est que facultatif dans certains cas, mais pour des raisons de cohérence du code, il est recommandé d'utiliser des guillemets doubles. input[type="text"]
Évitez de spécifier des unités pour les valeurs 0, par exemple, utilisez
au lieu de margin: 0;. margin: 0px;

Vous avez des questions sur les termes utilisés ici ? Voir Feuilles de style en cascade - Syntaxe sur Wikipédia.

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

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

Ordre de déclaration

Les déclarations de propriété associées doivent être regroupées et disposées dans l'ordre suivant :

Positionnement
Modèle de boîte
Typographique
Visuel

Puisque le positionnement peut être obtenu à partir des éléments sont supprimés de le flux de documents normal et peut également remplacer les styles liés au modèle de boîte, de sorte qu'ils sont classés en premier. Le modèle de boîte vient en deuxième position car il détermine la taille et l'emplacement des composants.

Les autres propriétés n'affectent que l'intérieur (à l'intérieur) du composant ou n'affectent pas les deux premiers groupes de propriétés, elles sont donc classées derrière.

Pour la liste complète des attributs et leur ordre, veuillez vous référer à Récréation.

.declaration-order {
/* Positionnement */
position : absolue;
haut : 0;
droite : 0;
bas : 0;
gauche : 0;
z-index : 100;

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

/* Typographie */
police : normal 13px "Helvetica Neue", sans-serif;
hauteur de ligne : 1,5;
couleur : #333 ;
text-align: center;

/* Visuel */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;

/* Divers */
opacité : 1;
}

Ne pas utiliser `@import`

par rapport à la balise <link> . @import La commande est beaucoup plus lente, ce qui non seulement augmente le nombre de requêtes supplémentaires, mais provoque également des problèmes imprévisibles. Les alternatives incluent :

Utiliser plusieurs <link> éléments
Un préprocesseur CSS comme Sass ou Less permettra aux fichiers CSS d'être compilés en un seul fichier
La fonction de fusion de fichiers CSS est fournie via Rails, Jekyll ou d'autres systèmes

Veuillez vous référer à l'article de Steve Souders pour en savoir plus.

<link rel="stylesheet" href="core.css">

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

Position de la requête média

Placez les requêtes média aussi près que possible des règles pertinentes. Ne les regroupez pas dans un seul fichier de style et ne les placez pas au bas du document. Si vous les séparez, ils ne seront oubliés de tous qu’à l’avenir. Un exemple typique est donné ci-dessous.

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

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

Attributs préfixés

Lors de l'utilisation d'attributs préfixés d'un fabricant spécifique, la valeur de chaque attribut est alignée verticalement par indentation, ce qui facilite l'édition sur plusieurs lignes.

Dans Textmate, utilisez Texte → Modifier chaque ligne de la sélection (⌃⌘A). Dans Sublime Text 2, utilisez Sélection → Ajouter la ligne précédente (⌃⇧↑) et Sélection → Ajouter la ligne suivante (⌃⇧↓).

/* Propriétés préfixées */
.selector {
-webkit-box-shadow : 0 1px 2px rgba(0,0,0,.15);
box -shadow : 0 1px 2px rgba(0,0,0,.15);
}

Déclaration de règle sur une seule ligne

Pour ne contient qu'une seule déclaration style, pour une lisibilité et une rédaction rapide, il est recommandé de mettre les déclarations sur une même ligne. Pour les styles comportant plusieurs déclarations, celles-ci doivent toujours être divisées en plusieurs lignes.

Le facteur clé pour ce faire est la détection des erreurs : par exemple, le validateur CSS indique qu'il y a une erreur de syntaxe à la ligne 183. S'il s'agit d'une seule instruction sur une seule ligne, vous n'ignorerez pas l'erreur ; s'il s'agit de plusieurs instructions sur une seule ligne, vous devez l'analyser attentivement pour éviter de manquer l'erreur.

/* Déclarations uniques sur une seule ligne */
.span1 { width: 60px; }
.span2 { width: }
.span3 { width: 220px; >

/* Déclarations multiples, une par ligne */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background -image : url(../style/images/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 abrégées

L'utilisation de déclarations de propriétés abrégées doit être limitée aux situations où toutes les valeurs doivent être définies explicitement. Les abus courants des déclarations d'attributs abrégés sont les suivants :

padding
margin
font
background
border
border-radius

Dans la plupart des cas, nous n'avons pas besoin de spécifier toutes les valeurs pour une déclaration de propriété abrégée. Par exemple, l'élément de titre HTML n'a besoin que de définir les valeurs de marge supérieure et inférieure, vous n'avez donc besoin de remplacer ces deux valeurs que si nécessaire. L'utilisation excessive de déclarations de propriétés abrégées peut conduire à un code encombré et provoquer des effets secondaires involontaires en provoquant des remplacements inutiles des valeurs de propriété.

MDN (Mozilla Developer Network) propose un très bon article sur les propriétés abrégées, qui est utile pour les utilisateurs qui ne sont pas familiers avec les déclarations de propriétés abrégées et leur comportement.

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

/* Bon exemple */
.element {
margin-bottom: 10px ;
couleur d'arrière-plan : rouge;
image d'arrière-plan : url("../style/images/image.jpg");
border-top-left-radius : 3px;
border -top-right-radius : 3px;
}

Moins et imbrication dans Sass

Évitez l'imbrication inutile. En effet, même si vous pouvez utiliser l'imbrication, cela ne signifie pas que vous devriez le faire. Utilisez l'imbrication uniquement lorsque les styles doivent être limités à l'élément parent (c'est-à-dire les sélecteurs descendants) et que plusieurs éléments doivent être imbriqués.

//Sans imbrication
.table > thead > th { … }
.table >
// Avec imbrication
.table > thehead > tr {
> th { … }
>

Commentaires

Le code est écrit et maintenu par des personnes. Assurez-vous que votre code est auto-descriptif, bien commenté et facile à comprendre pour les autres. Les bons commentaires de code transmettent le contexte et le but du code. Ne vous contentez pas de reformuler les noms de composants ou de classes.

Pour les commentaires plus longs, assurez-vous d'écrire des phrases complètes ; pour les commentaires généraux, vous pouvez écrire des phrases concises.

/* Mauvais exemple */
/* En-tête modal */
.modal-header {
...
}

/* Bon exemple */
/* Élément d'emballage pour .modal-title et .modal-close */
.modal-header {
...
}

Dénomination des classes

Seuls les caractères minuscules et les tirets (pas les traits de soulignement ni la casse camel) peuvent apparaître dans les noms de classe. Les tirets doivent être utilisés pour nommer les classes associées (similaires aux espaces de noms) (par exemple, .btn et .btn-danger).
Évitez les abréviations trop arbitraires. .btn représente un bouton, mais .s ne peut exprimer aucune signification.
les noms de classe doivent être aussi courts que possible et avoir une signification claire.
Utilisez des noms significatifs. Utilisez des noms organisés ou utiles, et non présentationnels.
Préfixez la nouvelle classe en fonction de la classe parent ou de la classe de base la plus proche.
Utilisez des classes .js-* pour identifier les comportements (par opposition aux styles) et n'incluez pas ces classes dans les fichiers CSS.

Vous pouvez également vous référer aux spécifications répertoriées ci-dessus lorsque vous nommez les variables Sass et Less.

/* Mauvais exemple */
.t { ... }
.red { ... }
.header { ... }

/* Bon exemple */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Sélecteur

Utilisez la classe pour les éléments communs, ce qui aidera à optimiser les performances de rendu.
Évitez d'utiliser des sélecteurs d'attributs (par exemple, [class^="..."]) pour les composants fréquents. Les performances du navigateur peuvent être affectées par ces facteurs.
Le sélecteur doit être le plus court possible, et essayer de limiter le nombre d'éléments qui composent le sélecteur. Il est recommandé de ne pas dépasser 3.
Seul restreint la classe à l'élément parent le plus proche (c'est-à-dire le sélecteur de descendant) lorsque cela est nécessaire (par exemple, lorsque vous n'utilisez pas de classe préfixée -- préfixe est similaire à un espace de noms).

Lecture approfondie :

Portée des classes CSS avec préfixes
Arrêter la cascade

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

/* Bon exemple */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Organisation du code

Organisez les segments de code en unités de composants.
Développer des conventions d'annotation cohérentes.
Utilisez des espaces cohérents pour séparer le code en morceaux, ce qui facilite la numérisation de documents plus volumineux.
Si vous utilisez plusieurs fichiers CSS, divisez-les en composants plutôt qu'en pages, car les pages seront réorganisées et les composants seront uniquement déplacés.

/*
* Titre de la section des composants
*/

.element { ... }

/*
* Titre de la section du composant
*
* Parfois, vous devez inclure un contexte facultatif pour l'ensemble du composant. Faites-le ici si c'est suffisamment important.
*/

Configurez votre éditeur comme suit pour éviter les incohérences et les différences courantes dans le code :

Remplacez les tabulations par deux espaces (la tabulation logicielle est utilisée. Les espaces représentent les caractères de tabulation).

Supprimez les caractères d'espacement de fin lors de l'enregistrement du fichier.

Définissez l'encodage du fichier sur UTF-8.
Ajoute une ligne vide à la fin du fichier.
Référez-vous à la documentation et ajoutez ces informations de configuration au fichier

← Spécifications de codage HTML Bootstrap