Quel que soit le nombre de personnes travaillant sur le même projet, assurez-vous que chaque ligne de code semble avoir été écrite par la même personne.
1. Utilisez deux espaces au lieu de tabulations : c'est le seul moyen de garantir un affichage cohérent dans tous les environnements.
2. Les éléments imbriqués doivent être mis en retrait une fois (c'est-à-dire deux espaces).
3. Pour la définition des attributs, veillez à utiliser des guillemets doubles et n'utilisez jamais de guillemets simples.
4. N'ajoutez pas de barre oblique finale à un élément à fermeture automatique – la spécification HTML5 indique clairement que cela est facultatif.
5. N'omettez pas la balise de fermeture facultative
<!DOCTYPEhtml> <html> <tête> <title>Titre de la page</title> </tête> <corps> <img src="images/company-logo.png" alt="Entreprise"> <h1 class="hello-world">Bonjour tout le monde !</h1> </corps> </html>
Ajoutez une déclaration de mode standard à la première ligne de chaque page HTML pour garantir une présentation cohérente dans chaque navigateur.
<!DOCTYPEhtml> <html> <tête> </tête> </html>
Selon la spécification HTML5 :
Il est fortement recommandé de spécifier l'attribut lang pour l'élément racine HTML afin de définir la langue correcte pour le document. Cela aidera les outils de synthèse vocale à déterminer la prononciation à utiliser, les outils de traduction à déterminer les règles à suivre lors de la traduction, etc.
<html lang="en-us"> <!-- ... --> </html>
IE prend en charge des balises spécifiques pour déterminer la version d'IE qui doit être utilisée pour dessiner la page actuelle. Sauf en cas de besoins particuliers importants, il est préférable de le définir en mode Edge pour indiquer à IE d'adopter le dernier mode qu'il prend en charge.
<méta http-equiv="X-UA-Compatible" content="IE=Edge">
En déclarant explicitement le codage des caractères, vous pouvez garantir que le navigateur détermine rapidement et facilement comment le contenu de la page doit être rendu. L'avantage est que vous pouvez éviter d'utiliser des balises d'entités de caractères en HTML, afin que tout soit cohérent avec l'encodage du document (généralement l'encodage UTF-8).
<tête> <méta charset="UTF-8"> </tête>
Selon la spécification HTML5, il n'est généralement pas nécessaire de spécifier l'attribut type lors de l'introduction de fichiers CSS et JavaScript, car text/css et text/javascript sont respectivement leurs valeurs par défaut.
<!-- CSS externe --> <link rel="stylesheet" href="code-guide.css"> <!-- CSS dans le document --> <style> /* ... */ </style> <!-- JavaScript --> <script src="code-guide.js"></script>
Essayez de suivre les normes et la sémantique HTML, mais ne sacrifiez pas l'aspect pratique. Essayez d'utiliser le moins de balises et de maintenir la complexité au minimum à tout moment.
Les attributs HTML doivent être disposés dans l'ordre indiqué ci-dessous pour garantir la lisibilité du code.
classe
pièce d'identité, nom
données-*
src, pour, type, href, valeur
titre, alt
rôle, air-*
La classe est utilisée pour identifier les composants hautement réutilisables, elle doit donc être répertoriée en premier. L'identifiant est utilisé pour identifier un composant spécifique et doit être utilisé avec prudence (par exemple, les signets dans une page), il vient donc en deuxième position.
Les propriétés booléennes peuvent être déclarées sans valeur. La spécification XHTML exige qu'une valeur lui soit attribuée, mais pas la spécification HTML5.
Pour plus d'informations, veuillez vous référer à la section WhatWG sur les attributs booléens :
Si un attribut booléen d'un élément a une valeur, il est vrai ; s'il n'a aucune valeur, il est faux.
Si vous devez lui attribuer une valeur, veuillez vous référer à la spécification WhatWG :
Si l'attribut existe, sa valeur doit être la chaîne vide ou […] le nom canonique de l'attribut, sans espace de début ou de fin.
Pour faire simple, il n’est pas nécessaire d’attribuer une valeur.
Lorsque vous écrivez du code HTML, essayez d'éviter les éléments parents redondants. Plusieurs fois, cela nécessite une itération et une refactorisation pour y parvenir. Veuillez consulter le cas suivant :
<!-- Pas si génial --> <span class="avatar"> <img src="..."> </span> <!-- Mieux --> <img class="avatar" src="...">
Les balises générées via JavaScript rendent le contenu difficile à trouver, à modifier et ralentissent les performances. Évitez-le quand vous le pouvez.
1. Utilisez deux espaces au lieu de tabulations : c'est le seul moyen de garantir un affichage cohérent dans tous les environnements.
2. Lorsque vous regroupez des sélecteurs, placez les sélecteurs individuels sur leur propre ligne.
3. Pour la lisibilité du code, ajoutez un espace avant l'accolade ouvrante de chaque bloc de déclaration.
4. L'accolade fermante du bloc de déclaration doit se trouver sur une ligne distincte.
5. Un espace doit être inséré après : dans chaque instruction de déclaration.
6. Pour un rapport d'erreurs plus précis, chaque instruction doit figurer sur sa propre ligne.
7. 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.
8. 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).
9. N'insérez pas d'espaces après les virgules dans les valeurs rgb(), rgba(), hsl(), hsla() ou rect(). Cela permet de distinguer plusieurs valeurs de couleur (uniquement des virgules, pas d'espaces) de plusieurs valeurs d'attribut (virgules et espaces).
10. Pour les valeurs d'attribut ou les paramètres de couleur, omettez le premier 0 pour les décimales inférieures à 1 (par exemple, 0,5 au lieu de 0,5 ; -.5px au lieu de -0,5px).
Les valeurs 11/Hex doivent être toutes en minuscules, par exemple #fff. Les caractères minuscules sont plus faciles à lire lors de la numérisation d'un document car leur forme est plus facile à distinguer.
12. Essayez d'utiliser des valeurs hexadécimales abrégées, par exemple, utilisez #fff au lieu de #ffffff.
13. Ajoutez des guillemets doubles pour les attributs dans le sélecteur, par exemple input[type="text"]. 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.
14. Évitez de spécifier des unités pour les valeurs 0, par exemple, utilisez margin: 0 au lieu de margin: 0px;.
/* Mauvais CSS */
.selector, .selector-secondary, .selector[type=text] {
remplissage : 15 px ;
marge :0px 0px 15px ;
couleur d'arrière-plan : rgba (0, 0, 0, 0,5) ;
box-shadow:0px 1px 2px #CCC,encart 0 1px 0 #FFFFFF
}
/* Bon CSS */
.sélecteur,
.sélecteur-secondaire,
.selector[type="text"] {
remplissage : 15 px ;
marge inférieure : 15 px ;
couleur d'arrière-plan : rgba(0,0,0,.5) ;
box-shadow : 0 1px 2px #ccc, encart 0 1px 0 #fff ;
}Les déclarations de propriété associées doivent être regroupées et classées dans l’ordre suivant :
Positionnement
Modèle de boîte
Typographique
Visuel
Le positionnement vient en premier car il supprime des éléments du flux normal de documents et peut remplacer les styles liés au modèle de boîte. 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 du composant ou n'affectent pas les deux premiers groupes de propriétés, elles sont donc classées derrière.
.déclaration-ordre {
/* Positionnement */
position : absolue ;
haut : 0 ;
à droite : 0 ;
bas : 0 ;
gauche : 0 ;
indice z : 100 ;
/* Modèle-boîte */
affichage : bloc ;
flotter : à droite ;
largeur : 100 px ;
hauteur : 100px ;
/* Typographie */
police : normale 13px "Helvetica Neue", sans empattement ;
hauteur de ligne : 1,5 ;
couleur : #333 ;
alignement du texte : centre ;
/* Visuel */
couleur d'arrière-plan : #f5f5f5 ;
bordure : 1px solide #e5e5e5 ;
rayon de bordure : 3 px ;
/* Divers */
opacité : 1 ;
}Par rapport aux balises, la directive @import 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 les éléments suivants :
Compilez plusieurs fichiers CSS en un seul fichier via un préprocesseur CSS similaire à Sass ou Less. Les fonctions de fusion de fichiers CSS sont fournies via Rails, Jekyll ou d'autres systèmes.
<!-- Utiliser les éléments de lien -->
<link rel="stylesheet" href="core.css">
<!-- Évitez les @imports -->
<style>
@import url("plus.css");
</style>Placez les requêtes multimédias 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.
.élément { ... }
.élément-avatar { ... }
.element-selected { ... }
@media (largeur minimale : 480 px) {
.élément { ...}
.élément-avatar { ... }
.element-selected { ... }
}Pour les styles qui contiennent une seule instruction, il est recommandé de placer l’instruction sur la même ligne pour plus de lisibilité et une édition rapide. 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 { largeur : 60 px ;
.span2 { largeur : 140 px ;
.span3 { largeur : 220 px ;
/* Déclarations multiples, une par ligne */
.sprite {
affichage : bloc en ligne ;
largeur : 16px ;
hauteur : 15px ;
image d'arrière-plan : url(../img/sprite.png);
}
.icon {position d'arrière-plan : 0 0 }
.icon-home {position d'arrière-plan : 0 -20 px ;
.icon-account { background-position : 0 -40px } ;Dans les cas où vous devez définir toutes les valeurs explicitement, vous devez essayer de limiter l'utilisation de déclarations de propriétés abrégées. Les abus courants en matière de déclarations de propriété abrégées sont les suivants :
rembourrage
marge
fonte
arrière-plan
frontière
rayon de frontière
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é.
/* Mauvais exemple */
.élément {
marge : 0 0 10px ;
fond : rouge ;
arrière-plan : url("image.jpg");
rayon de bordure : 3px 3px 0 0 ;
}
/* Bon exemple */
.élément {
marge inférieure : 10 px ;
couleur de fond : rouge ;
image d'arrière-plan : url("image.jpg");
bordure en haut à gauche : 3 px ;
rayon de bordure en haut à droite : 3 px ;
}Évitez les nidifications inutiles. 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 > tête > tr > th { …
.table > thead > tr > td { …
// Avec imbrication
.table > tête > tr {
> le { …
> td { …
}Pour améliorer la lisibilité, ajoutez un espace entre les valeurs, les variables et les opérateurs des expressions mathématiques entre parenthèses.
// Mauvais exemple
.élément {
marge : 10px 0 @variable*2 10px ;
}
// Bon exemple
.élément {
marge : 10px 0 (@variable * 2) 10px ;
}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 des commentaires plus longs, veillez à écrire des phrases complètes ; pour des commentaires généraux, vous pouvez écrire des phrases concises.
/* Mauvais exemple */
/* En-tête modal */
.modal-en-tête {
...
}
/* Bon exemple */
/* Élément d'emballage pour .modal-title et .modal-close */
.modal-en-tête {
...
} 1. 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).
2. Évitez les abréviations trop arbitraires. .btn représente un bouton, mais .s ne peut exprimer aucune signification.
3. Les noms de classe doivent être aussi courts que possible et avoir une signification claire.
4. Utilisez des noms significatifs. Utilisez des noms organisés ou utiles, plutôt que présentés.
5. Basé sur la classe parent ou la classe de base la plus proche comme préfixe de la nouvelle classe.
6. Utilisez les classes .js-* pour identifier les comportements (par opposition aux styles) et n'incluez pas ces classes dans les fichiers CSS.
/* Mauvais exemple */
.t { ... }
.rouge { ... }
.en-tête { ... }
/* Bon exemple */
.tweet { ... }
.important { ... }
.tweet-en-tête { ... } Utilisez des classes pour les éléments communs, ce qui contribuera à optimiser les performances de rendu.
Pour les composants fréquents, évitez d'utiliser des sélecteurs d'attributs (par exemple, [class^="…"]). Les performances du navigateur peuvent être affectées par ces facteurs.
Le sélecteur doit être le plus court possible, et essayez de limiter le nombre d'éléments qui composent le sélecteur. Il est recommandé de ne pas dépasser 3.
Restreindre les classes à l'élément parent le plus proche (c'est-à-dire le sélecteur descendant) uniquement lorsque cela est nécessaire (par exemple, lorsque vous n'utilisez pas de classes préfixées - les préfixes sont comme des espaces de noms).
/* Mauvais exemple */
portée { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }
/* Bon exemple */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }Configurez votre éditeur comme suit pour éviter les incohérences et les différences courantes dans le code :
Utilisez deux espaces pour remplacer les caractères de tabulation (la tabulation douce signifie utiliser des espaces pour représenter les caractères de tabulation). Lors de l'enregistrement du fichier, supprimez les caractères d'espacement de fin. Définissez le codage du fichier sur UTF-8. Ajoute une ligne vide à la fin du fichier.
Reportez-vous à la documentation et ajoutez ces informations de configuration au fichier .editorconfig de votre projet. Par exemple : instance .editorconfig dans Bootstrap. Pour plus d’informations, consultez à propos de EditorConfig.