Guide de style HTML/CSS de Google

Cet article présente les conventions de formatage HTML et CSS recommandées par Google afin d'établir de bonnes habitudes personnelles de codage.

Règles générales de style

Omettez la partie protocole des URL pour les images, les styles, les scripts et les autres fichiers multimédias (http:,https:), sauf si le fichier n'est pas disponible avec les deux protocoles. Ce schéma est appelé URL relative au protocole. L'avantage est que, que vous accédiez à la page en HTTPS ou HTTP, le navigateur demandera les ressources de la page en utilisant le même protocole, et cela peut aussi économiser quelques octets.

<!-- 不推荐 -->
<script src="https://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* 不推荐 */
.example {
  background: url("https://www.google.com/images/example");
}

/* 推荐 */
.example {
  background: url("//www.google.com/images/example");
}

Règles générales de mise en forme

Indentation

Indentez de 2 espaces à la fois. N'utilisez pas de tabulations et ne mélangez pas tabulations et espaces pour l'indentation.

<ul>
  <li>Fantastic
  <li>Great
</ul>

.example {
  color: blue;
}

Capitalisation

Utilisez uniquement des minuscules pour les éléments suivants : noms d'éléments HTML, attributs, valeurs d'attributs (sauf texte/CDATA), sélecteurs CSS, propriétés et valeurs de propriétés.

<!-- 不推荐 -->
<A HREF="/">Home</A>

<!-- 推荐 -->
<img src="google.png.html" alt="Google">

/* 不推荐 */
color: #E5E5E5;

/* 推荐 */
color: #E5E5E5;

Espaces blancs en fin de ligne

<!-- 不推荐 -->
<p>What?_

<!-- 推荐 -->
<p>Yes please.

Règles générales sur les métadonnées

Encodage

Spécifiez l'encodage en HTML via <meta charset="utf-8">. Il n'est pas nécessaire de le spécifier en CSS, car UTF-8 est la valeur par défaut.

Commentaires

Utilisez des commentaires pour expliquer le code : les modules qu'il contient, sa fonctionnalité et ses avantages.

Éléments de tâche

Utilisez TODO pour marquer les tâches à faire, plutôt que d'autres marqueurs comme @@.

<!-- TODO: remove optional tags -->
<ul>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

Règles de style HTML

Type de document

Les documents HTML doivent utiliser le type de document HTML5 : <!DOCTYPE html>.

Les éléments vides n'ont pas besoin de se fermer eux-mêmes,<br>N'écrivez pas<br />。

Validité HTML

Utilisez du HTML valide autant que possible.

<!-- 不推荐 -->
<title>Test</title>
<article>This is only a test.

<!-- 推荐 -->
<!DOCTYPE html>
<meta charset="utf-8">
<title>Test</title>
<article>This is only a test.</article>

Sémantique

<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>

<!-- 推荐 -->
<a href="recommendations/index.html">All recommendations</a>

Solution de repli multimédia

Pour les éléments multimédias tels que les images, les vidéos et les animations canvas, assurez-vous que d'autres contenus accessibles sont fournis. Les images peuvent utiliser un texte alternatif (alt), et les vidéos et l'audio peuvent utiliser des versions textuelles.

<!-- 不推荐 -->
<img src="spreadsheet.png.html">

<!-- 推荐 -->
<img src="spreadsheet.png.html" alt="Spreadsheet screenshot.">

Séparation des préoccupations

Séparez le balisage, le style et le script, en garantissant un couplage minimal entre eux.

Références d'entités

Si les fichiers et les éditeurs de l'équipe utilisent le même encodage, il n'est pas nécessaire d'utiliser des références d'entité, telles que—， ”，☺, sauf pour certains caractères ayant une signification spéciale en HTML (comme < et &) et des caractères invisibles (comme les espaces).

<!-- 不推荐 -->
The currency symbol for the Euro is &ldquo;&eur;&rdquo;.

<!-- 推荐 -->
The currency symbol for the Euro is “€”.

Attribut type

Ne précisez pas l'attribut type lorsque vous faites référence à des feuilles de style et des scripts, sauf s'il ne s'agit pas de CSS ou de JavaScript.
Car dans HTML5, le type par défaut pour les styles est text/css, et pour les scripts, c'est text/javascript.

<!-- 不推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css"
  type="text/css">

<!-- 推荐 -->
<link rel="stylesheet" href="//www.google.com/css/maia.css">

<!-- 不推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
  type="text/javascript"></script>

<!-- 推荐 -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

Règles de formatage HTML

Guillemets HTML

Utilisez des guillemets doubles pour les valeurs d'attributs.

<!-- 不推荐 -->
<a class='maia-button maia-button-secondary'>Sign in</a>

<!-- 推荐 -->
<a class="maia-button maia-button-secondary">Sign in</a>

Règles de style CSS

Nommage des ID et des classes

Utilisez des noms significatifs pour les id et les class.

/* 不推荐: 含义不明确 */
#yee-1901 {}

/* 不推荐: 按直觉来的 */
.button-green {}
.clear {}

/* 推荐: 指定含义 */
#gallery {}
#login {}
.video {}

/* 推荐: 通用 */
.aux {}
.alt {}

Style de nommage des ID et des classes

Les id et class doivent être aussi courts que possible tout en restant faciles à comprendre.

/* 不推荐 */
#navigation {}
.atr {}

/* 推荐 */
#nav {}
.author {}

Sélecteurs

Ne faites pas précéder un id ou une class par un nom d'élément, sauf si nécessaire.

/* 不推荐 */
ul#example {}
div.error {}

/* 推荐 */
#example {}
.error {}

Notation abrégée des propriétés

Utilisez des propriétés raccourcies dans la mesure du possible en CSS (comme font), ce qui améliore l'efficacité de codage et la lisibilité du code.

/* 不推荐 */
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* 推荐 */
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0 et unités

N'ajoutez pas d'unité lorsque la valeur est 0.

margin: 0;
padding: 0;

0 initial

Lorsque la valeur est comprise entre -1 et 1, un 0 initial n'est pas nécessaire.

font-size: .8em;

Notation hexadécimale

/* 不推荐 */
color: #EEBBCC;

/* 推荐 */
color: #ebc;

Préfixes

L'utilisation d'espaces de noms préfixés peut éviter les conflits de nommage et améliorer la maintenabilité du code.

.adw-help {} /* AdWords */
#maia-note {} /* Maia */

Séparateurs d'ID et de nom de classe

L'utilisation de traits d'union dans les sélecteurs améliore la lisibilité.

/* 不推荐:  “demo” 和 “image” 之间没有分隔符 */
.demoimage {}

/* 不推荐: 使用下划线 */
.error_status {}

/* 推荐 */
#video-id {}
.ads-sample {}

Règles de formatage CSS

Ordre des déclarations

Écrire le CSS dans l'ordre alphabétique des noms de propriétés facilite la lecture et la maintenance. Ignorez les propriétés avec des préfixes de navigateur lors du tri.

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

Indentation du contenu de bloc

Pour refléter la hiérarchie et améliorer la lisibilité, tout le contenu de bloc doit être indenté.

@media screen, projection {

  html {
    background: #fff;
    color: #444;
  }

}

Fins de déclaration

Chaque ligne de CSS doit se terminer par un point-virgule.

/* 不推荐 */
.test {
  display: block;
  height: 100px
}

/* 推荐 */
.test {
  display: block;
  height: 100px;
}

Deux-points après le nom de propriété

Il doit y avoir un espace entre le nom de la propriété et la valeur.

/* 不推荐 */
h3 {
  font-weight:bold;
}

/* 推荐 */
h3 {
  font-weight: bold;
}

Séparation des blocs de déclaration

Utilisez un espace entre le sélecteur et {}.

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}

/* 推荐 */
#video {
  margin-top: 1em;
}

Séparation du sélecteur et de la déclaration

Chaque sélecteur commence sur une nouvelle ligne.

/* 不推荐 */
a:focus, a:active {
  position: relative; top: 1px;
}

/* 推荐 */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

Séparation des règles

Séparez les règles par des lignes vides.

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

Guillemets CSS

Utilisez des guillemets simples pour les sélecteurs d'attributs et les valeurs de propriétés. Les valeurs URI n'ont pas besoin de guillemets.

/* 不推荐 */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}

/* 推荐 */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

Règles méta CSS

Commentaires de section

Utilisez des commentaires pour diviser le CSS en sections.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

URL d'origine : https://google.github.io/styleguide/htmlcssguide.xml