Crear una guía de estilo CSS para tu sitio es sencillo y vale la pena

A veces es difícil mantener un estilo consistente en todas las partes de tu sitio. Sobretodo si trabajas con diferentes equipos y todos le meten mano al frontend (Lo cual es bueno. No hay que tenerle miedo al frontend. ¡No muerde!)

Una técnica que he visto últimamente en diferentes charlas (y también en la empresa donde trabajo actualmente) es la creación de una guía de estilo viviente (living style guide). Se trata de una página en la que se documentan de una manera ordenada y clara los componentes de la interfaz de usuario de tu sitio.

La parte interesante es que se utilizan los mismos estilos (css/sass/less) del sitio principal, de tal manera que los cambios en el estilo del sitio principal se propagan automáticamente a la  guía de estilo.

Algunos ejemplos de sitios que utilizan esta técnica son:

Screenshot de la guía de estilo de GitHub

Así es la guía de estilo de GitHub

Es sencillo

Existen varias herramientas que facilitan el proceso de crear una guía de estilo. El proceso es muy sencillo:

  1. Documenta tus código (css/sass/less) utilizando comentarios.
  2. Ejecuta una herramienta que lee los comentarios de tu código y genera automáticamente tu guía de estilo.
  3. Publica tu guía de estilo junto con tu sitio.

Un ejemplo de estas herramientas es StyleDoco, la cual está basada en node.js y requiere que escribas tu documentación en formato markup. Otro ejemplo es KSS el cual define su propio formato de documentación.

Vale la pena

  • Crear una guía de estilo CSS te obliga a rediseñar tus hojas de estilo. Te hace reestructurar tus estilos para favorecer su reutilización.
  • La guía de estilo se convierte en la documentación en línea de tus hojas de estilo.
  • Se nota que el diseño de tu sitio sigue la misma línea, ya que los desarrolladores tienen una base sobre la cual crear nuevas páginas utilizando el mismo estilo del sitio.
  • Las tareas de frontend se realizan más rápido ya que se pueden reutilizar muchos componentes ya existentes.

En mi empresa nuestra guía de estilo fue creada a mano y es mantenida por una desarrolladora que se especializa en frontend. Pero voy a intentar convencerla de que comencemos a utilizar StyleDocco.

Últimamente he estado muy ocupado preparando una mudanza y mis vacaciones en México. Pero llegando de vacaciones (en diciembre) voy a preparar una entrada con un ejemplo práctico de StyleDocco.

Etiquetado , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: