Guia de estilo para CSS y HTML de Google

Posted by in HTML5

De vuelta de vacaciones, siempre es bueno imponerse nuevos propósitos, y entre ellos, este año me lo voy a tomar con más calma. Siempre voy con prisas, y muchas veces es mejor hacer una pausa antes de seguir corriendo. En esta ocasión, he invertido unas cuantas horas en conocer cómo es la hoja de estilos para CSS y HTML de Google, que si estás metido en el mundo del desarrollo web, te resultará de mucha utilidad.

Las guia de estilos son muy necesarias

Esta no es la primera vez que trato el tema de las guias de estilo, pues ya comenté en su tiempo cómo hay que programar con Python, y también en Javascript. Hoy le toca el turno a HTML y CSS, según Google.

El motivo de aprender la guia de estilos está muy relacionado con la claridad en la programación, el seguimiento de unas reglas comunes con vistas a que, cuando pase el tiempo, sepas en todo momento qué hiciste. Esa claridad es fundamental para mejorar, pues la ofuscación o hacer las cosas a salto de mata puede conllevar después dolores de cabeza para buscar alguna cosa concreta que sabemos que falla o que debe mejorar. Pero no solo eso, ceñirte a seguir unas reglas en característica básica cuando trabajas en grupo, sobre todo si es grande.

La guia de HTML y CSS de Google

La puedes encontrar aquí: https://google.github.io/styleguide/htmlcssguide.xml?showone=Optional_Tags#Optional_Tags, si bien, te doy unos cuantos puntos a destacar:

  • No incluir el protocolo en los enlaces, esto es, omitir http o https
  • No usar tabulador, sino 2 espacios (en Python son 4 espacios). En realidad, es para mejorar la legibilidad
  • Usar siempre minúscula
  • Elimina los espacios en blanco innecesario, sobre todo al final de las líneas
  • Usa UTF-8 (no BOM)
  • Usa comentarios cuando sean necesarios (sin excederse)
  • Incluye TODO con aquello que está pendiente de realizar
  • Usa los tags de HTML para lo que realmente son, es decir, no crees confusiones
  • Omite type para la carga de CSS y Javascript, salvo que sea necesario
  • Usa una línea nueva para cada bloque y utiliza la indentación
  • Es preferible usar comillas dobles a las simples cuando hay que incluir valores en las propiedades en HTML, pero usa comillas simples cuando uses CSS
  • Usa nombres con sentido e identificadores en los CSS
  • Usa propiedades cortas cuando sea posible (en CSS)
  • Omite los 0 cuando puedas. Ejemplo, en lugar de 0.8, escribe .8
  • Usa 3 caracteres haxadecimales cuando puedas (en lugar de 6)
  • Usa prefijos para los selectores, sobre todo, cuando sean grandes proyectos
  • Evita la detección de agentes de usuario (user agent) y otras formas de hack para navegadores concretos (para mejorar el mantenimiento)
  • Usa ; al terminar cada declaración en CSS
  • Usa un espacio después de los : en la declaración de propiedades en CSS
  • Usa una nueva línea para cada declaración (en lugar de apilarlas todas bajo una misma línea)
  • Deja una línea entre cada declaración

Aunque pueda resultar breve este resumen, la guía de estilo no es mucho más extensa, por lo que te animo a que pierdas una hora de tu tiempo en aprenderla bien e ir poniendola en práctica.

Mi experiencia al aplicar guias de estilo

Quizás te resulte perder el tiempo dedicar unos minutos (o un par de horas) a esto de cumplir unas guias de estilo, pero a mi me ha servido mucho. Personalmente, yo destacaría: me permite escribir código más limpio, nombrar variables para lo que son, mejor visibilidad, y no implica un exceso de trabajo extra, para los beneficios que tiene (sobre todo, a largo plazo).

Si no lo haces, aun estas a tiempo!

Buen día!

Google+ Comments - Comentarios Google+