Table des matières

HTML

CSS

前端 HTML-CSS 规范

Règle d'or

Un projet doit toujours suivre le même ensemble de normes de codage !

Quel que soit le nombre de personnes impliquées dans le même projet, assurez-vous que chaque ligne de code semble avoir été écrite par la même personne.

HTML

Syntaxe

  • Utilisez deux espaces au lieu de tabulations — c'est le seul moyen de garantir un rendu cohérent dans tous les environnements.
  • Les éléments imbriqués doivent être indentés une fois (soit deux espaces).
  • Pour les définitions d'attributs, utilisez toujours des guillemets doubles, jamais des guillemets simples.
  • N'ajoutez pas de barre oblique finale aux éléments auto-fermants —la spécification HTML5indique explicitement que cela est facultatif.
  • N'omettez pas les balises de fermeture facultatives (par exemple,</li>ou</body>）。
<!DOCTYPE html>
<html>
  <head>
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png.html" alt="Company">
    <h1 class="hello-world">Hello, world!</h1>
  </body>
</html>

Doctype HTML5

Ajoutez une déclaration de mode standard comme première ligne de chaque page HTML afin de garantir un rendu cohérent dans tous les navigateurs.

<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

Attribut de langue

Selon la spécification HTML5 :

Il est fortement recommandé de spécifier l'attribut lang sur l'élément racine html afin de définir la langue correcte du document. Cela aidera les outils de synthèse vocale à déterminer la prononciation qu'ils doivent utiliser, et aidera les outils de traduction à déterminer les règles qu'ils doivent suivre lors de la traduction, entre autres avantages.

Plus d'informations surlangon peut en apprendre davantage sur l'attribut à partir decette spécificationpour plus de détails.

Voici letableau des codes de langue.。

<html lang="zh-CN">
  <!-- ... -->
</html>

Mode de compatibilité IE

IE prend en charge l'utilisation d'un mode spécifique<meta>balise <meta> pour déterminer quelle version d'IE doit être utilisée pour afficher la page actuelle. À moins qu'il n'y ait de fortes exigences particulières, il est préférable de la définir surmode Edge, indiquant ainsi à IE d'utiliser le dernier mode qu'il prend en charge.

Lisez cet article Stack Overflowpour plus d'informations utiles.

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

Encodage des caractères

En déclarant explicitement l'encodage de caractères, vous pouvez garantir que les navigateurs peuvent déterminer rapidement et facilement comment afficher le contenu de la page. L'avantage est que cela évite d'avoir à utiliser des entités de caractères en HTML, restant ainsi cohérent avec l'encodage du document (généralement UTF-8).

<head>
  <meta charset="UTF-8">
</head>

Inclusion des fichiers CSS et JavaScript

Selon la spécification HTML5, lors de l'inclusion de fichiers CSS et JavaScript, vous n'avez généralement pas besoin de spécifier letypeattribut type, cartext/cssettext/javascriptce sont leurs valeurs par défaut respectives.

Liens vers la spécification HTML5

<!-- External CSS -->
<link rel="stylesheet" href="code-guide.css.html">

<!-- In-document CSS -->
<style>
  /* ... */
</style>

<!-- JavaScript -->
<script src="code-guide.js.html"></script>

Pragmatisme

Respectez autant que possible les standards et la sémantique HTML, mais ne sacrifiez pas la praticité. Essayez toujours d'utiliser le moins de balises possible et de maintenir la plus faible complexité.

Ordre des attributs

Les attributs HTML doivent être disposés dans l'ordre indiqué ci-dessous afin de garantir la lisibilité du code.

  • class
  • id, name
  • data-*
  • src, for, type, href
  • title, alt
  • aria-*, role

class est utilisé pour identifier des composants hautement réutilisables, il doit donc être placé en premier. id est utilisé pour identifier des composants spécifiques et doit être utilisé avec prudence (par exemple, pour les signets dans la page), il est donc placé en second.

<a class="..." id="..." data-modal="toggle" href="../index.html">
  Example link
</a>

<input class="form-control" type="text">

<img src="....html" alt="...">

Attributs booléens

Les attributs booléens peuvent être déclarés sans valeur. La spécification XHTML exige une valeur, mais la spécification HTML5 ne l'exige pas.

Pour plus d'informations, veuillez vous référer à la sectionWhatWG sur les attributs booléens：

Un attribut booléen sur un élément est vrai s'il a une valeur, et faux s'il n'a pas de valeur.

Sivous devez absolumentattribuer une valeur, veuillez consulter la spécification WhatWG :

Si l'attribut existe, sa valeur doit être soit une chaîne vide, soit le nom canonique de l'attribut, et aucun espace blanc de fin ne doit être ajouté.

En termes simples, n'attribuez simplement pas de valeur.

<input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

Réduire le nombre de balises

Lorsque vous écrivez du code HTML, essayez d'éviter les éléments parents inutiles. Souvent, cela nécessite des itérations et une refactorisation. Voir l'exemple ci-dessous :

<!-- Not so great -->
<span class="avatar">
  <img src="....html">
</span>

<!-- Better -->
<img class="avatar" src="....html">

Balises générées par JavaScript

Les balises générées par JavaScript rendent le contenu difficile à trouver et à modifier, et réduisent les performances. Évitez-les lorsque c'est possible.

CSS

Syntaxe

  • Utilisez deux espaces au lieu des tabulations — c'est le seul moyen de garantir un rendu cohérent dans tous les environnements.
  • Lorsque vous regroupez des sélecteurs, placez chaque sélecteur individuel sur sa 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.
  • Le deux-points de chaque instruction de déclaration:doit être suivi d'un espace.
  • Pour obtenir des rapports d'erreur plus précis, chaque déclaration doit être sur sa propre ligne.
  • Toutes les instructions de déclaration doivent se terminer par un point-virgule. Le point-virgule après la dernière déclaration est facultatif, mais si vous l'omettez, votre code peut être plus sujet aux erreurs.
  • Pour les valeurs de propriété séparées par des virgules, insérez un espace après chaque virgule (par exemple,box-shadow）。
  • N'utilisez pasrgb()、rgba()、hsl()、hsla()ourect()insérez un espaceà l'intérieurd'une valeur après une virgule. Cela aide à distinguer entre plusieurs valeurs de propriété (virgule suivie d'un espace) et plusieurs valeurs de couleur (virgule seule, sans espace).
  • Pour les valeurs de propriété ou les paramètres de couleur, omettez le 0 initial pour les décimales inférieures à 1 (par exemple,.5au lieu de0.5；-.5pxau lieu de-0.5px）。
  • Les valeurs hexadécimales doivent être toutes en minuscules, par exemple,#fff. Lorsqu'on analyse un document, les caractères minuscules sont plus faciles à reconnaître car leurs formes sont plus distinctes.
  • Essayez d'utiliser des valeurs hexadécimales abrégées, par exemple, utilisez#fffau lieu de#ffffff。
  • Ajoutez des guillemets doubles aux attributs dans les sélecteurs, par exemple,input[type="text"]。est facultatif uniquement dans certains cas, mais pour la cohérence du code, il est recommandé de toujours inclure des guillemets doubles.
  • Évitez de spécifier des unités pour les valeurs zéro, par exemple, utilisezmargin: 0;au lieu demargin: 0px;。

Des questions sur la terminologie utilisée ici ? Veuillez vous référer à lasection syntaxe de l'article Cascading Style Sheets de Wikipédia。

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

Ordre des déclarations

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

  1. Positionnement
  2. Modèle de boîte
  3. Typographique
  4. Visuel

Comme le positionnement peut retirer des éléments du flux normal du document et peut aussi surcharger les styles liés au modèle de boîte, il est placé en premier. Le modèle de boîte vient en second car il détermine la taille et la position des composants.

Les autres attributs n'affectent que l'intérieurdu composant ou n'affectent pas les deux premiers groupes, ils sont donc placés plus tard.

Pour la liste complète des propriétés et leur ordre, veuillez vous 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>Comparé à la balise <link>,@importla directive @import est beaucoup plus lente ; non seulement elle ajoute des requêtes supplémentaires, mais elle cause aussi des problèmes imprévisibles. Il existe plusieurs alternatives :

  • Utiliser plusieurs<link>éléments
  • Compiler plusieurs fichiers CSS en un seul fichier via un préprocesseur CSS tel que Sass ou Less.
  • La fonctionnalité de concaténation des fichiers CSS fournie par Rails, Jekyll ou d'autres systèmes

Veuillez consulterl'article de Steve Souderspour plus d'informations.

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

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

Placement des media queries

Placez les media queries aussi près que possible de leurs règles associées. Ne les regroupez pas dans une seule feuille de style ni en bas du document. Si vous les séparez, elles finiront par être oubliées à l'avenir. Voici un exemple typique.

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

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

Propriétés préfixées

Lorsque vous utilisez des propriétés préfixées spécifiques à un fournisseur, indentez de sorte que la valeur de chaque propriété soit alignée verticalement, ce qui facilite l'édition sur plusieurs lignes.

Dans TextMate, utilisezText → Edit Each Line in Selection(⌃⌘A). Dans Sublime Text 2, utilisezSelection → Add Previous Line(⌃⇧↑) etSelection → Add Next Line (⌃⇧↓).

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

Déclarations de règles sur une seule ligne

Pourles styles ne comportant qu'une seule déclaration, il est recommandé de placer l'instruction sur une seule ligne pour la lisibilité et une édition rapide. Pour les styles comportant plusieurs déclarations, les déclarations doivent toujours être réparties sur plusieurs lignes.

Le facteur clé est la détection d'erreurs – par exemple, un validateur CSS signale une erreur de syntaxe à la ligne 183. S'il s'agit d'une seule déclaration sur une seule ligne, vous ne passerez pas à côté de l'erreur ; s'il y a plusieurs déclarations sur une seule ligne, vous devez analyser attentivement pour éviter de manquer l'erreur.

/* 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 les cas où toutes les valeurs doivent être définies explicitement, essayez de limiter l'utilisation des déclarations de propriétés raccourcies. Les abus courants des déclarations de propriétés raccourcies 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 les déclarations de propriétés raccourcies. Par exemple, les éléments de titre HTML n'ont besoin de définir que les valeurs de marge supérieure et inférieure, donc lorsque c'est nécessaire, il suffit de redéfinir ces deux valeurs. L'utilisation excessive des déclarations de propriétés raccourcies peut conduire à un code désordonné et peut causer des effets secondaires inattendus dus à des redéfinitions inutiles de valeurs de propriétés.

Un très bon article sur MDN (Mozilla Developer Network) à propos despropriétés raccourciesest utile pour les utilisateurs qui ne sont pas familiers avec les déclarations de propriétés raccourcies et leur comportement.

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

Imbrication dans Less et Sass

Évitez l'imbrication inutile. En effet, bien que vous puissiez utiliser l'imbrication, cela ne signifie pas que vous devez le faire. N'utilisez l'imbrication que lorsque vous devez restreindre les styles à un élément parent (c'est-à-dire les sélecteurs descendants) et que plusieurs éléments doivent être imbriqués.

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

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

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. De bons commentaires de code transmettent le contexte et l'objectif. Ne vous contentez pas de répéter les noms de composants ou de classes.

Pour les commentaires plus longs, écrivez des phrases complètes ; pour les annotations générales, des phrases concises sont acceptables.

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

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

Nommage des classes

  • Les noms de classes ne doivent contenir que des caractères minuscules et des tirets (pas de traits de soulignement ni de camelCase). Les tirets doivent être utilisés pour nommer des classes apparentées (similaires aux espaces de noms) (par exemple,.btnet.btn-danger）。
  • Évitez les abréviations trop arbitraires..btnreprésentebutton, mais.sne transmet aucun sens.
  • Les noms de classes doivent être aussi courts que possible et clairement significatifs.
  • Utilisez des noms significatifs. Utilisez des noms organisationnels ou basés sur la finalité, et non des noms de présentation.
  • Utilisez la classe parente la plus proche ou la classe de base comme préfixe pour les nouvelles classes.
  • Utiliser.js-*classes pour identifier le comportement (par opposition au style), et ne pas inclure ces classes dans les fichiers CSS.

Lorsque vous nommez des variables Sass et Less, vous pouvez également vous référer aux spécifications listées ci-dessus.

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

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

Sélecteurs

  • Utilisez des classes pour les éléments courants, ce qui est bénéfique pour l'optimisation des performances de rendu.
  • Évitez les sélecteurs d'attributs pour les composants fréquemment utilisés (par ex.,[class^="..."]). Les performances du navigateur sont affectées par ces facteurs.
  • Gardez les sélecteurs aussi courts que possible et limitez le nombre d'éléments dans un sélecteur, de préférence pas plus de 3.
  • Nerestreindre les classes à l'élément parent le plus proche que lorsque c'est nécessaire (c.-à-d., sélecteurs descendants) (par exemple, lorsque vous n'utilisez pas de classes préfixées – les préfixes sont similaires aux espaces de noms).

Pour aller plus loin :

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

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

Organisation du code

  • Organiser les segments de code par composant.
  • Établissez des conventions de commentaires cohérentes.
  • Utilisez un espacement cohérent pour séparer le code en blocs, ce qui facilite le parcours de documents plus volumineux.
  • Si plusieurs fichiers CSS sont utilisés, divisez-les par composant plutôt que par page, car les pages peuvent être réorganisées alors que les composants ne sont que déplacés.
/*
 * 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 de l'éditeur

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

  • Utilisez deux espaces au lieu de tabulations (tabulation douce, c.-à-d., des espaces représentent des caractères de tabulation).
  • Supprimer les espaces de fin lors de l'enregistrement des fichiers.
  • Définir l'encodage du fichier sur UTF-8.
  • Ajoutez une ligne vide à la fin du fichier.

Reportez-vous à la documentation et ajoutez ces informations de configuration au.editorconfigfichier du projet. Par exemple :Un exemple .editorconfig de Bootstrap. Pour plus d'informations, veuillez consulterles informations sur EditorConfig。