Normas de HTML/CSS de Google

Este artículo presenta las normas de formato de escritura de HTML y CSS recomendadas por Google, para establecer buenos hábitos personales de codificación.

Normas de estilo generales

Omite la parte del protocolo de las URL de imágenes, estilos, scripts y otros archivos multimedia (http:,https:), a menos que el archivo no esté disponible en ambos protocolos. Este esquema se denomina URL protocol-relative; la ventaja es que, ya sea que accedas a la página mediante HTTPS o HTTP, el navegador solicitará los recursos de la página con el mismo protocolo, y además se pueden ahorrar algunos bytes.

<!-- 不推荐 -->
<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");
}

Normas de formato generales

Indentación

Indenta dos espacios a la vez; no uses tabuladores ni una combinación de tabuladores y espacios.

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

.example {
  color: blue;
}

Mayúsculas y minúsculas

Todo lo siguiente debe estar en minúsculas: nombres de elementos HTML, atributos, valores de atributos (excepto text/CDATA), selectores CSS, propiedades y valores de propiedades.

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

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

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

/* 推荐 */
color: #E5E5E5;

Espacios finales

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

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

Metanormas generales

Codificación

En HTML, especifica la codificación mediante <meta charset="utf-8">; en CSS no es necesario especificarla, porque el valor predeterminado es UTF-8.

Comentarios

Usa comentarios para explicar el código: los módulos que incluye, su funcionalidad y sus ventajas.

Tareas pendientes

Usa TODO para marcar las tareas pendientes, en lugar de usar otras marcas como @@.

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

Normas de estilo HTML

Tipo de documento

Los documentos HTML deben usar el tipo de documento de HTML5: <!DOCTYPE html>.

Las etiquetas vacías no necesitan cerrarse por sí mismas,<br>no las escribas como<br />。

Corrección de HTML

Usa HTML correcto siempre que sea posible.

<!-- 不推荐 -->
<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>

Semántica

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

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

Degradación de elementos multimedia

Para elementos multimedia como imágenes, vídeos, animaciones canvas, etc., asegúrate de proporcionar otros contenidos accesibles. Las imágenes pueden usar texto alternativo (alt); los vídeos y el audio pueden usar versiones textuales.

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

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

Separación de preocupaciones

Separa el marcado, los estilos y los scripts, y asegúrate de que el acoplamiento mutuo sea mínimo.

Referencias a entidades

Si los archivos y los editores del equipo usan la misma codificación, no es necesario utilizar referencias a entidades, como—， ”，☺, excepto para algunos caracteres que tienen un significado especial en HTML (como < y &) y caracteres invisibles (como los espacios).

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

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

Atributo type

Al hacer referencia a hojas de estilo y scripts, no especifiques el atributo type, a menos que no se trate de CSS o JavaScript.
Porque en HTML5 el type predeterminado para las hojas de estilo ya es text/css y el type para los scripts es 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>

Normas de formato HTML

Comillas en HTML

Usa comillas dobles para los valores de los atributos.

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

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

Normas de estilo CSS

Nombres de ID y Class

Usa nombres de id y class con significado.

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

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

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

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

Estilo de nombres de ID y Class

Los id y class deben ser lo más breves posible, pero fáciles de entender.

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

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

Selectores

A menos que sea necesario, no antepongas nombres de elemento a id o class.

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

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

Abreviación de propiedades

Usa en la medida de lo posible las propiedades abreviables de CSS (como font), ya que mejora la eficiencia de codificación y la legibilidad del código.

/* 不推荐 */
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 y unidades

Cuando el valor sea 0, no agregues unidades.

margin: 0;
padding: 0;

Cero inicial

Cuando el valor está entre -1 y 1, no es necesario añadir el 0 inicial.

font-size: .8em;

Notación hexadecimal

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

/* 推荐 */
color: #ebc;

Prefijos

Usar espacios de nombres con prefijos puede evitar conflictos de nombres y mejorar el mantenimiento del código.

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

Separadores en nombres de ID y Class

Usar guiones en los selectores mejora la legibilidad.

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

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

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

Normas de formato CSS

Orden de escritura

Escribir CSS en orden alfabético por propiedad facilita la lectura y el mantenimiento; al ordenar, ignora las propiedades con prefijos de navegador.

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

Indentación del contenido a nivel de bloque

Para reflejar la jerarquía y mejorar la legibilidad, todo el contenido de bloque debe estar indentado.

@media screen, projection {

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

}

Fin de las declaraciones

Cada línea de CSS debe terminar con un punto y coma.

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

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

Fin del nombre de propiedad

Debe haber un espacio entre el nombre de la propiedad y su valor.

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

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

Separación del bloque de declaraciones

Separa con un espacio entre el selector y {}.

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

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

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

Separación de selectores

Cada selector debe ir en una línea aparte.

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

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

Separación de reglas

Separa las reglas con líneas en blanco.

html {
  background: #fff;
}

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

Comillas en CSS

Usa comillas simples para los selectores de atributo y los valores de propiedades; los valores de URI no necesitan comillas.

/* 不推荐 */
@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;
}

Metarreglas de CSS

Comentarios por secciones

Usa comentarios para dividir el CSS en secciones.

/* Header */

#adw-header {}

/* Footer */

#adw-footer {}

/* Gallery */

.adw-gallery {}

Dirección original: https://google.github.io/styleguide/htmlcssguide.xml