English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
: doit insérer un espace.box-ombre)rgb(),rgba(),hsl(),hsla() ou rect() valeurintérieurInsérez un espace après la virgule suivante pour les valeurs des attributs, par exemple, insérez un espace après la virgule pour distinguer plusieurs valeurs de couleurs (seulement des virgules, pas d'espaces)..5 au lieu de 0.5;-.5px au lieu de -0.5px)#fff。Lors de la lecture du document, les caractères minuscules sont plus faciles à distinguer car leur forme est plus facile à différencier.#fff au lieu de #ffffff。input[type="text"]。est optionnel dans certains cas， mais, pour une cohérence du code, il est recommandé de les inclure toutes avec des guillemets doubles.marge: 0; au lieu de marge: 0px;。Si vous avez des doutes sur les termes utilisés ici, veuillez consulter Wikipedia Feuille de style en cascade - grammaire。
/* Mauvais CSS */
.selector, .selector-secondaire, .selector[type=text] {
padding:15px;
marge:0px 0px 15px;
fond-color:rgba(0, 0, 0, 0.5);
box-ombre:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Bon CSS */
.selector,
.selector-secondaire,
.selector[type="text"] {
padding: 15px;
marge-bas: 15px;
fond-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
Les déclarations associées aux propriétés devraient être regroupées et organisées dans l'ordre suivant :
En raison de la localisation (positionnement), les éléments peuvent être supprimés du flux de document normal et peuvent également couvrir les styles liés au modèle de boîte (box model), donc ils sont classés en premier. Le modèle de boîte est classé deuxième, car il détermine la taille et la position des composants.
d'autres propriétés n'affectent que les composantsinterneou qui n'affecte pas les deux premiers groupes d'attributs, donc ils sont placés à la fin.
La liste complète des attributs et leur ordre d'arrangement peuvent être consultés Retrait。
.déclaration-order {
/* Positionnement */
position: absolu;
haut: 0;
droite: 0;
bas: 0;
gauche: 0;
z-index: 100;
/* Boîte-modèle */
affichage: bloc;
flottant: à droite;
width: 100px;
height: 100px;
/* Typographie */
police: normal 13px "Helvetica Neue", sans-serif;
ligne-height: 1.5;
couleur: #333;
texte-align: center;
/* Visuel */
fond-couleur: #f5f5f5;
border: 1px solide #e5e5e5;
bordure-radius: 3px;
/* Divers */
opacity: 1;
}
@importet <link> par rapport aux balises@import Les instructions sont beaucoup plus lentes, non seulement augmentent le nombre de requêtes supplémentaires, mais peuvent également entraîner des problèmes imprévisibles. Les alternatives suivantes incluent :
<link> ÉlémentVeuillez consulter Article de Steve SoudersEn savoir plus.
<!-- Utiliser des éléments link -->
<link rel="stylesheet" href="core.css">
<!-- Éviter @imports -->
<style>
@import url("more.css");
</style>
Placez les requêtes media à proximité des règles les plus pertinentes. Ne les regroupez pas dans un fichier de style unique ou à la fin du document. Si vous les séparez, ils seront bientôt oubliés. Voici un exemple typique.
.element { ... }
.element-avatar { ... }
.element-selected { ... }
@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}
Lorsque vous utilisez des attributs précédés d'un préfixe spécifique de fabricants, alignez chaque valeur d'attribut verticalement par indentation pour faciliter l'édition multiligne.
Dans Textmate, utiliser Text → Edit Each Line in Selection (⌃⌘A). Dans Sublime Text 2 dans, utiliser Sélection → Ajouter une ligne précédente (⌃⇧↑) et Sélection → Ajouter une 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);
}
PourNe contient qu'une seule déclarationdes styles, pour améliorer la lisibilité et faciliter la modification rapide, il est recommandé de placer les instructions sur la même ligne. Pour les styles avec plusieurs déclarations, il est toujours préférable de les diviser en plusieurs lignes.
Cet objectif principal est la détection des erreurs -- Par exemple, le vérificateur CSS indique que dans 183 La ligne a une erreur de syntaxe. Si c'est une déclaration unique sur une ligne, vous ne passerez pas cette erreur ; si c'est plusieurs déclarations sur une ligne, vous devez analyser attentivement pour éviter de manquer des erreurs.
/* Déclarations uniques sur une ligne */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }
/* Déclarations multiples, une par ligne */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
fond-image: url(../img/sprite.png);
}
.icon { background-position: 0 0; }
.icon-home { background-position: 0 -20px; }
.icon-account { background-position: 0 -40px; }
Lorsque vous devez définir toutes les valeurs explicitement, il est préférable de limiter l'utilisation des propriétés de court format. Les cas courants d'utilisation abusive des propriétés de court format sont les suivants :
paddingmargefontfondbordurebordure-radiusDans la plupart des cas, nous n'avons pas besoin de spécifier toutes les valeurs pour les propriétés de court format. Par exemple, l'élément de titre HTML nécessite uniquement la définition des marges supérieure et inférieure (marge), donc, au besoin, il suffit de couvrir ces deux valeurs. L'utilisation excessive des propriétés de court format peut entraîner un code en désordre et entraîner des couvertures inutiles des valeurs des propriétés, ce qui peut causer des effets secondaires imprévus.
MDN (Mozilla Developer Network) un excellent article surpropriétés de court format de l'article, est très utile pour les utilisateurs qui ne sont pas familiers avec les propriétés de court format et leur comportement.
/* Mauvais exemple */
.element {
margin: 0 0 10px;
background: red;
fond: url("image.jpg");
bordure-radius: 3px 3px 0 0;
}
/* Bon exemple */
.element {
marge-bas: 10px;
fond-couleur: rouge;
fond-image: url("image.jpg");
bordure-haut-gauche-radius: 3px;
bordure-haut-droite-radius: 3px;
}
Évitez les enchaînements inutiles. Cela est dû au fait que bien que vous puissiez utiliser des enchaînements, cela ne signifie pas que vous devriez utiliser des enchaînements. Utilisez les enchaînements uniquement lorsque vous devez limiter les styles à l'élément parent (c'est-à-dire les sélecteurs descendance) et qu'il existe plusieurs éléments nécessitant un enchaînement.
// Sans nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }
// Avec le nesting
.table > thead > tr {
> th { … }
> td { … }
}
Le code est écrit et entretenu par des humains. Assurez-vous que votre code est auto-descriptif, bien commenté et facile à comprendre pour d'autres. De bons commentaires de code peuvent transmettre des relations contextuelles et des objectifs du code. Ne répétez pas simplement les noms de composants ou de classes.
Pour les commentaires longs, écrivez des phrases complètes ; pour les annotations générales, vous pouvez utiliser des phrases concises.
/* Mauvais exemple */
/* En-tête modal */
.modal-header {
...
}
/* Bon exemple */
/* Élément enveloppe pour .modal-titre et .modal-fermer */
.modal-header {
...
}
.btn et .btn-dangereux).btn représente boutonMais .s Ne doivent pas exprimer de sens..js-* Utilisez la classe 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 normes énumérées ci-dessus pour nommer les variables Sass et Less.
/* Mauvais exemple */
.t { ... }
.red { ... }
.header { ... }
/* Bon exemple */
.tweet { ... }
.important { ... }
.tweet-header { ... }
[class^="..."]). Les performances du navigateur peuvent être affectées par ces facteurs.Lecture complémentaire :
/* Mauvais exemple */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Bon exemple */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }
/*
* Titre de section du composant
*/
.element { ... }
/*
* Titre de section du composant
*
* Parfois, vous devez inclure un contexte optionnel pour tout le composant. Faites-le ici si cela est important.
*/
.element { ... }
/* sous-composant contextuel-component ou modificateur */
.element-heading { ... }
Configurez votre éditeur selon les paramètres suivants pour éviter les incohérences et les différences courantes dans le code :
Référez-vous au document et ajoutez ces informations de configuration au .editorconfig dans le fichier. Par exemple :Exemple .editorconfig dans Bootstrap。 à propos EditorConfig。