Las Hojas de Estilo en Cascada (CSS) son el recubrimiento gráfico de tu documento HTML. Cuando estamos creando una web tenemos presentes en todo momento tanto la estructura de nuestro código HTML como del propio CSS.

Y sabemos siempre en qué línea del archivo buscar la información que necesitamos para modificar nuestros selectores y clases.

Pero cuando ha pasado un tiempo desde que terminamos el desarrollo de este código, y deseamos retomarlo porque queremos rediseñarlo partiendo del CSS ya escrito, o simplemente porque queremos hacer algunos ajustes, seguramente no nos acordaremos de la mitad de la información que antes teníamos tan clara.

Por ésto es esencial haber estructurado y documentado mínimamente nuestra Hoja de Estilo desde un principio para evitar estos sobresaltos posteriores.Como todo, las orientaciones que dejo escritas no son más que eso: orientaciones.

Deberás buscar para tus Hojas de Estilo la estructura que mejor se adapte a tu forma de escribir el código y te sea más fácil de manejar. No obstante, este podría ser un buen punto de partida.

Partiendo el código: CSS únicos y múltiples

Nuestra primera pregunta deberá ser necesariamente si deseamos trabajar con un solo archivo CSS que contenga toda la información o si por el contrario queremos dividirla por cualquier motivo (comodidad a la hora de localizar los estilos, coexistencia de diseñadores o programadores que se encargan exclusivamente de una parte del código, etc.).

Ya que ésto va a condicionar nuestros pasos siguientes.
Para el primero de los casos, esto es, un CSS único, nuestro archivo podría tomar el nombre, por ejemplo de estilos.css.

En realidad, para un CSS único, ésto no tiene excesiva importancia.
Pero si por el contrario vamos a manejar varios archivos, es muy recomendable que el nombre que le demos sea descriptivo del contenido, y que a todos los ‘unamos’ en otro único archivo, a fin de realizar una única llamada desde nuestro HTML.

También podríamos hacer sucesivas llamadas desde nuestro HTML, pero con el sistema que yo propongo, nunca modificaríamos nuestro HTML, sino únicamente un archivo CSS que contendrá un listado de las hojas de estilo que van a ser llamadas cada vez.

Veámoslo con un ejemplo:

Hemos decidido dividir nuestro CSS en tres partes, a saber, maquetación, formularios y  colores.
Lo que haremos en primer lugar será crear un archivo al que llamaremos estilos.css.  Este archivo importará las diferentes partes de nuestro CSS.

Por otro lado, y separadamente, crearemos tres archivos que contengan cada una de las partes en que hemos decidido dividir nuestro estilo, es decir,  maquetacion.css, formularios.css y colores.css. Así pues, el contenido del archivo estilos.css será éste: 

  @import "maquetacion.css";
  @import "formularios.css";
  @import "colores.css";

Así, con una sola llamada desde nuestro HTML al CSS raíz (estilos.css), obtendremos la inclusión de todas las partes que forman nuestra hoja de estilos, y para añadir nuevas o eliminar las que hayan caído en desuso sólo tenemos que modificar estilos.css sin preocuparnos de nada más.

Información sobre el contenido: uso de comentarios

Como primer paso para una estructuración sensata de nuestro CSS, hemos aprendido ya a separar los estilos en varios archivos (si fuera necesario), y a llamarlos todos desde uno solo.

Ahora bien, aunque los nombres sean muy descriptivos cuando los veamos en una lista de archivos, a la hora de editarlos es frecuente que los abramos todos a la vez, y a los diez minutos de estar cambiando constantemente de uno a otro, es probable que lleguemos a desorientarnos y no saber muy bien cuál estamos modificando.

Por eso, mi segunda recomendación es iniciar cada archivo dejando escrito un comentario que nos ubique. Como apuntaba al principio, documentar mínimamente nuestro CSS va a ser de gran ayuda a la hora de realizar tareas sobre él con posterioridad.

Pero esta documentación no la haremos sólo sobre el inicio del código, sino que la iremos extendiendo a las diferentes partes, como veremos después.
La forma en que escribimos un comentario en CSS es iniciándolo con /* y finalizándolo con */ .Por ejemplo, /* Comentario a la hoja de estilos */.

De este modo, y retomando estilos.css, mi sugerencia es dejar un par de líneas nada más iniciar el archivo que describan el proyecto, la autoría, la licencia de uso en su caso, y el contenido del mismo, tal que así:

/*
*  CSS para el sitio www.misitio.com 
*  Importación de las distintas hojas de estilo
*  Autor: Pepito Pérez
*/

@import "maquetacion.css";
@import "formularios.css";
@import "colores.css";

En los demás archivos, dejaríamos una indicación parecida a ésta:

/*
*  CSS para el sitio www.misitio.com
*  MAQUETACIÓN >> Estructura del sitio (encabezado, cuerpo, columna(s) y pie)
*  Autor: Pepito Pérez
*/

Seccionando el contenido de nuestra hoja

Independientemente del hecho de haber dividido nuestro estilo en varios archivos o no, mi tercera recomendación pasa por separar físicamente los diferentes estilos que van a formar nuestra hoja mediante el uso de comentarios.

De una manera bastante básica, y pensando en una página con una estructura de encabezado, contenido, barra lateral y pie, y un solo archivo css, podríamos dividir nuestra hoja en algunas secciones que englobarían varios estilos. Me atrevo a apuntar siete:

  • Elementos Comunes
  • Estructura
  • Encabezado
  • Contenido
  • Barra Lateral
  • Pie
  • Formularios

En cada una de ella incluiremos la información relativa a la misma.
En ‘Elementos Comunes’ definiríamos selectores, encabezados, pseudo-selectores, pseudo-clases, pseudo-elementos, pequeños “fixes”, comportamiento en los enlaces y en definitiva, todo aquello que queremos que se aplique por igual a nuestro HTML.

En ‘Estructura’ daríamos forma a las diferentes partes que van a formar nuestra web, esto es, determinaríamos las dimensiones y ubicación de nuestro encabezado, pie, barra lateral, etc.

En las demás secciones escribiríamos el diseño específico de cada selector que se aplique exclusivamente a cada una de ellas.
Como podéis ver hemos intentado ir de lo más general a lo más específico.

Comentar, comentar, comentar. Estructura y nominación

No, no es una obsesión. Comentar el código es la base de todo ésto. Debemos tomarnos la molestia de comentar cada paso que demos al escribir nuestro css.
Por ejemplo, antes de comenzar una sección nueva, indiquémosla. Por ejemplo:

/****************************************
*          ELEMENTOS COMUNES
*  body, a, h1, h2, h3, h4, h5, img, div
*****************************************/

 /*****************************************************
*                            ESTRUCTURA
* #header, #content, #sidebar1, #sidebar2, #footer
******************************************************/

Pero no sólo debemos comentar la estructura. Debemos comentar también los elementos que van a formar nuestra hoja, siempre que puedan llevarnos a una duda posterior, a fin de evitar esto.
Por ejemplo:

#contenedor{
	width: 780px;
	margin: auto;	/*Esta propiedad deja el id centrado en la pantalla. */
}

Pero también:

a, a:link, a:active, a:visited{
	color: #004080;	/* Azul Oscuro paraen los enlaces */
	text-decoration none; /*El enlace no aparecerá subrayado */
}
a:hover{
	color: #0066cc  /* Azul Claro al pasar el ratón por encima de los enlaces*/
	text-decoration: underline; /* Subrayado del enlace al pasar el ratón */
}

Un buen consejo para ésto comienza no en nuestro CSS sino en nuestro HTML. Cuando demos nombre a nuestras clases (class) e identificadores (id), debemos tratar de ser lo más descriptivos posible.

Por ejemplo, no debemos llamar a una clase .verdegrande sólo porque su formato inicial vaya a ser color verde y tipografía con tamaño grande, porque si posteriormente deseamos que la clase no sea verde sino roja, además de perder todo sentido, es posible que nos cueste buscarla en el código por una simple cuestión de asociación mental.

Lo recomendable, por ejemplo, es aludir a su función para nominar, esto es, .copyright, o .comentario, o .datos.

Claridad o ligereza. Pros y contras

Como cuestión final me gustaría poner en una balanza, aun cuando brevemente, la cuestión de la claridad versus la ligereza en la Hoja de Estilos. Muchas veces encontraremos opiniones enfrentadas acerca de la conveniencia o no de la agrupación de selectores, el uso de herencias, la minimización de redundancias, la eliminación de comentarios.

El objetivo de todas estas técnicas es hacer más ligeras (disminuir el tamaño) las hojas de estilo, porque supone una ralentización en los tiempos de carga de la página. Mi opinión a este respecto es simple: dependerá de dos factores, a saber, la complejidad del diseño y las expectativas de modificación posterior .

Si mi diseño tiene un CSS de 500 líneas, o preveo tener que modificarlo muy a la larga, yo prefiero que el archivo sea comprensible y manejable, aun a costa de que resulte unos cuantos kb más pesado. Pero para gustos, colores. Debes ser tú quien, ante cada caso concreto, decida qué es lo más conveniente, claridad o ligereza.