"El diseño es el embajador silencioso de tu marca"
- Paul Brand

La guia de estilos de Mark Otto

La guia de estilos de Mark Otto es lectura obligatoria para cualquier diseñador web.
Para quienes no hayan escuchado hablar de Mark Otto o @mdo, es nada más y nada menos que el creador de Bootstrap y actualmente director de diseño de Github. Si quieres seguirlo esta es su página de twitter.

 

 

Por lo que cuando se le ocurre decir algo sobre este campo haríamos muy bien en prestar atención, recientemente ha decidido crear su propia guía de estilos para escribir código HTML y CSS.

Y de este guia de estilo es de lo que trata el post, una serie de recomendaciones muy a tener en cuenta al picar código, y que no solo proporciona limpieza, sino que al seguir pautas que muchos aplicamos mejora su legibilidad.

Este tipo de guias además han sido diseñadas para evitar ciertos errores comunes que cometemos, y que aunque en nuestro entorno funcionen, serán revelados cuando testeamos en otras plataformas.

En primer lugar podemos consultarla aquí.

Yo voy a repasar algunas de las normas más importantes que establece.

La primera norma importante con la que abre su guía de estilos es el uso de «soft tabs», y te preguntarás que es eso, cuando escribimos nuestro código es necesario tabularlo si queremos que sea legible y a la larga mantenible cuando empiece a crecer. Podemos hacer las tabulaciones con el tabulador que es lo que se conoce como «hard tabs» o podemos hacerlas simplemente añadiendo espacios «soft tabs».
Ahora que tenemos claro que los soft tabs es cambiar los caracteres de tabulación por espacios, @mdo sugiere que tabulemos usando 2 espacios.
(Esto es tanto para el codigo html como el css)

Cuando escribimos atributos en nuestras etiquetas html usar simpre comillas dobles.

No incluir en los elementos de html que permiten omitir la eiqueta de cierre la clasica barra final, por ejemplo los br, input o img.

Si queremos más información sobre esto, podemos ver la página oficial que define el estandar de html5 aquí, fijaros en el punto número 6 que establece las normas de las etiquetas de apertura…

No omitir las etiquetas de cierre que son opcionales, como por ejemplo la de los elementos de listado o la del body.

Siempre comenzar los documentos html estableciendo el doctype de html5 y el lenguaje en la etiqueta html, básicamente es empezar siempre de esta manera…

Establecer siempre cual es la codificación de caracteres de nuestra página y el modo de compatibilidad con IE, esto lo hacemos escribiendo en el head las siguiente etiquetas.

No especificar el type de los recursos CSS y JS cuando declaramos estos ficheros.

Escribir cada selector css en una única linea.
Separar la llave de apertura y los valores de los atributos css con un espacio.
Acabar siempre la declaración de un atributo css con punto y coma.
Cuando sea posible usar la manera abreviada de escribir los hexadecimales, por ejemplo #ffffff se puede abreviar como #fff.
Cuando escribimos hexadecimales usar solo minúsculas.
Usar comillas dobles siempre que declaremos el valor de un atributo dentro de un selector.
No escribir las unidades cuando el valor sea 0.

Podemos ver un caso práctico con el siguiente código

No usar nunca @import para traernos hojas css ya que es mucho más lento que usat una etiqueta link.
Generar una única hoja de estilos con algun preprocesador.
Cuando solo declaramos una regla podemos escribirlo todo en la misma linea

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)