Reglas, sugerencias, un poco de todo

La llamada Google HTML/CSS Style Guide es eso; un documento de Google que intenta definir algunas reglas a seguir cuando se escriben códigos HTML o CSS cuyo objetivo es ayudar a quienes lo leen o deben interpretarlo.

La guia es una mezcla de sugerencias validas y subjetivas por lo tanto, cada uno debería "filtrarla" y tener en cuenta aquellas cosas que se adapten a su modo de trabajo y descartar las otras. La base de todo esto es la accesibilidad es decir, que nosotros mismos entendamos qué estamos escribiendo y lo hagamos siempre del mismo modo para que resulte sencillo modificarlo en el futuro.

La paradoja del documento de Google es que ellos no aplican lo que predican ya que las páginas que crean los servicios que administran suelen ser engendros irracionales sin pies ni cabeza. Ni hablar de Blogger o de sus plantillas !!!

De todos modos, acá hay algunas sugerencias a tener en cuenta que no son novedad pero tal vez valga la pena repetir.

1 Usar las etiquetas HTML correctas ya que cada una de ellas ha sido creada con un propósito.

A es un enlace por lo tanto; es mejor poner:

<a href="UNA_URL">un enlace</a>

que:

<div onclick="abrir('UNA_URL');">un enlace</a>

H1 H2 H3 etc son encabezados; el número (1 a 6) no existe para indicar su tamaño sino para indicar su importancia. Una página web sólo debería tener una etiqueta H1 y esa etiqueta debería ser el título. Si hay subtítulos se usa H2 y no hay que abusar de ellos; si los títulos son elementos intrascendentes (por ejemplo los títulos de la sidebar de Blogger) estos no deberían tener una etiqueta de encabezado y si la tienen, jamás deberían ser encabezados "superiores" al título del blog o al título de la entrada.

P es un párrafo (un texto) así que escribir:

<p><img src="UNA_IMAGEN" /></p>

no tiene mucho sentido.

2 Toda etiqueta IMG debería tener un atributo alt que indique el contenido alternativo pero, lo mismo debería hacerse con videos o cualquier otro tipo de contenido multimedia.

3 Las reglas del HTML5 dicen que ya no es necesario agregar el atributo type en hojas de estilo y scripts a menos que el tipo no sea el usual (CSS y JavaScript) por lo tanto, se sugiere que en lugar de esto:

<link rel="stylesheet" href="archivo.css" type="text/css" />
<script src="archivo.js" type="text/javascript"></script>

se use:

<link rel="stylesheet" href="archivo.css" />
<script src="archivo.js"></script>

ya que es algo que funcionará en cualquier navegador y en cualquier página, aún cuando no sea HTML5.

4 Agregar siempre un punto y coma final a cualquier propiedad de CSS aún cuando no sea "obligatoria" es algo que evitará errores futuros.

Suele verse esto:

.ejemplo {
  text-align: center
}

que funciona perfectamente pero, en algún momento le agregamos alguna otra propiedad:

.ejemplo {
  text-align: center
  color: red;
}

y ya no funcionará porque nos hemos olvidado de agregarle el punto y coma final.

5 Indentar el código siempre es buena idea porque permite visualizar qué cosa esta dentro de que otra y de ese modo comprender cómo se verán afectados los contenidos. Ellos recomiendan usar dos espacios y evitar el uso de la tecla TAB (cosa con la que yo estoy de acuerdo) pero, es algo que queda criterio de cada uno:

<div>
  <p> algo </p>
  <ul>
    <li> item </li>
    <li> item </li>
    <li> item </li>
  </ul>
  <div>
    <!-- OTRA COSA -->
  </div>
</div>

Minimizar quitando espacios o indentaciones debería estar reservado sólo a aquellos códigos que estemos completamente seguros que no vamos a editar jamás.

Por el contrario, se recomienda minimizar ciertas cosas, por ejemplo, eliminar las comillas innecesarias en las direcciones URL:

background: url("UNA_IMAGEN") no-repeat 0 0 transparent;

se puede escribir:

background: url(UNA_IMAGEN) no-repeat 0 0 transparent;

usar tres caracteres de color cuando es posible:

color: #FFF;

en lugar de:

color: #FFFFFF;

eliminar la unidad cuando el valor es cero:

margin: 0;

en lugar de:

margin: 0px;

eliminar el cero cuando se usan valores decimales:

font-size: .8em;

en lugar de:

font-size: 0.8em;

6 Una última recomendación que desconocía y habría que verificar y evaluar: omitir el protocolo (http:, https:) en las direcciones URL de los archivos externos a menos que ese protocolo sea absolutamente necesario; en lugar de:

background: url(https://lh5.googleusercontent.com/xxxxxxx/imagen.jpg);

usar:

background: url(//lh5.googleusercontent.com/xxxxxxx/imagen.jpg);

Si optamos por esto, hay que tener en cuenta que la URL debe comenzar con //

En resumen: conviene leerlo, "masticarlo", aplicar aquello que nos parezca razonable y descartar el resto. Como siempre, sólo debe primar el sentido común y no aceptar todo lo que se diga como si fuera una verdad revelada e incontrovertible, lo diga quien lo diga.