20 buenas prácticas en CSS

CSS es algo inseparable del desarrollo y en concreto del diseño web. A día de hoy pocas páginas existen (no conozco ninguna) que no utilice al menos un archivo CSS para aplicar estilos. Así que veamos juntos un lista de buenas prácticas, que al final no son más que consejos aceptados por la comunidad y que suelen ayudar a mejorar nuestro código.

1. Entender qué es CSS

Lo más importante es entender la esencia de CSS (Cascading Style Sheets), hojas de estilo en cascada, y la palabra clave aquí es cascada. Esto implica que los estilos se aplican desde el elemento que lo definimos hacia todos los hijos:

Esta imagen de SitePoint representa una página web muy simple, pero muestra claramente lo que es para el navegador úna página web: un árbol. En concreto se llama DOM, aunque tiene muchos detalles, nos sirve para entender que cuando aplicamos un estilo a body, por ejemplo, tanto h1 como p se ven afectados si ese estilo es aplicable para esos elementos.

2. Evita usar demasiadas clases

Cuando estés diseñando probablemente solo veas clases y más clases posibles por todos lados, pero a veces no es necesario usando selectores más sencillos. Echemos un vistazo al siguiente HTML y CSS aplicado:

1
2
3
4

<div id="principal">
	<h1 class="titulo">Título</h1>
	<p class="parrafo">Texto ejemplo</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin: 0 auto;
	width: 960px;
}	             
 
#principal .titulo {
	font-size: 16px;
}                   
 
#principal .parrafo {
	margin-top: 10px;
}

La primera tentación al dar estilos puede ser algo como eso, pues bien, si nos damos cuenta no es necesario el uso de clases, reduciendo así la complejidad de nuestro HTML. Quedaría algo más sencillo:

1
2
3
4

<div id="principal">
	<h1>Título</h1>
	<p>Texto ejemplo</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin: 0 auto;
	width: 960px;
}	             
 
#principal h1 {
	font-size: 16px;
}                   
 
#principal p {
	margin-top: 10px;
}

3. Primero estructura HTML, después CSS

Es preferible empezar por crear la estructura HTML de las páginas que vayamos a maquetar, porque eso facilitará enormemente después el proceso de darle estilos. Una vez que se ha creado un esquema de cómo va a ser la página se puede identificar qué elementos tendrán un id, o una clase…etc.

4. Usa Reset CSS

Muchos navegadores modifican los estilos por defecto por distintas razones, como que cuando veas una imagen no se junte con la ventana, para evitarlo podemos usar una serie de propiedades CSS que hagan que todos los navegadores tengan los mismos estilos por defecto, en esta página puedes encontrar uno de ellos, aunque hay muchos más.

5. Da información al principio del CSS

Puedes usar un comentario como plantilla para ponerlo en todos los archivos CSS, de tal forma que otros desarrolladores puedan ver lo que tenías en mente cuando lo estabas escribiendo. Algo como esto:

1
2
3
4
5
6
7
8
9
10

/*---------------------------------------------------------------
- Nombre:				style.css
- Ultima actualización:			23/07/10
- Website:				www.polargeek.net
- Autor:				José
== ESTRUCTURA ===================================================
- Ancho mínimo:				980px
- Columnas:				2
- Posición cuerpo:			Centrado
---------------------------------------------------------------*/

Este es sólo un ejemplo, puedes incluir las secciones que consideres oportunas, si estás pensando ahora mismo en si esto haría que el archivo ocupara más y la carga de la página fuera más lenta te doy la enhorabuena porque es el primer paso para mejorar la carga. Vamos al siguiente punto.

6. Los estándares promueven el desarrollo

Seamos francos, IE es uno de los principales lastres para el desarrollo de la Web, pero nosotros, como desarrolladores, deberíamos validar nuestras páginas para saber que realmente estamos cumpliendo los estándares y usando apropiadamente este lenguaje de marcado.

Es cierto que a veces, por el simple hecho de usar CSS 3 no podemos validar, pero cuando no lo uses deberías hacerlo.

7. No uses hacks de CSS

Todos sabemos que hacer una página cross-browser es muy tedioso y solemos intentar terminarlo lo antes posible, pero usando hacks en CSS lo único que conseguimos es tener un código más difícil de mantener y que puede fallar en un futuro más próximo de lo que cabría esperar.

Si se quiere usar unos estilos en concreto para un navegador es mejor usar un CSS específico e incluirlo con un comentario condicional.

8. Evita estilos en el HTML

Prácticamente siempre edita los estilos en un archivo CSS aparte, así mantendremos nuestro HTML más limpio.

Existen excepciones como los correos en formato HTML, donde no puedes enlazar un CSS y todos los estilos se deben poner en el HTML, pero salvo este caso y pocos más nunca se deben usar.

9. Combina selectores

Si varios elementos comparten estilos júntalos en una sola línea con comas, algo como:

1
2
3
4
5
6
7
8

#principal {
	margin: 12px;
	color: #5D5D5D;
}                
 
#comentario {
	margin: 12px;
}

Se podría quedar en esto:

1
2
3
4
5
6
7

#principal, #comentario {
	margin: 12px;
}                
 
#principal {
	color: #5D5D5D;  
}

Que se podría pensar que es trivial, pero nada más lejos de la realidad. Si tenemos 5 divs por toda nuestra página y en todos hemos decidido mantener un color naranja, cuando cambiemos el diseño y digamos que ahora estos divs van a ser negros, será mucho más fácil cambiarlo una vez que cinco.

10. Usa minúsculas en todo el CSS

Esta es una de las convenciones que se adoptan y que realmente favorecen a todos. Haciendo todo el CSS con minúsculas el archivo queda más limpio y unificado. Así que lo más acertado son las minúsculas, incluso para el nombre del archivo, pero esto ya va por gustos.

11. La navaja de Ockham es tu amiga

Para no liarnos con filosofía ahora, esto quiere decir que mientras más simple mejor. Siempre que quieras hacer algo que es común y no sepas cómo, busca por Google, porque probablemente haya un modo facil.

Por ejemplo, imaginemos que queremos centrar un div, pues con esta sencilla propiedad y definiendo el ancho quedaría centrado:

1
2
3
4

#principal {
	margin: 0 auto;
	width: 960px;
}

La razón es bien simple, le decimos al navegador que haga que en la izquierda y la derecha haya el mismo hueco, así que la única manera es poniéndolo en el centro (el 0 no es estrictamente necesario, sólo se refiere al margin-top y al margin-bottom a la vez).

12. Comenta el CSS

Como casi cada cosa que hagas en la vida (sobre todo profesional) se te olvidará los detalles al poco tiempo, así que es preferible comentar casi todo lo que no tengas claro en un principio y así te podrás acordar después cuando tengas que retocar el diseño.

13. Usa los selectores justos y necesarios

Intenta no abusar de los selectores, porque hacen que la renderización de la página sea más lenta, de hecho a partir de 3 selectores deberías empezar a replantearte hacerlo de otro modo. Echemos un vistazo a este código:

1
2
3

body div.central a span {
	color: orange;
}

Esto tarda mucho más que lo siguiente:

1
2
3

#link span {
	color: orange;
}

Y si el anchor que contiene el span tiene el id “link” hará exáctamente lo mismo, pero mucho más rápido.

14. Comprime tus archivos CSS

Cuando trabajes en un diseño es mejor mantener una versión de desarrollo, local, y otra comprimida en el servidor. Esto ahorrará tiempo de carga y ancho de banda.

Hay muchas herramientas a día de hoy para hacer esta tarea, personalmente uso Css Compressor, aunque puedes buscar la que más se ajuste a las necesidades. Al fin y al cabo todas tienen un objetivo común, y es quitar espacios innecesarios, comentarios, e incluso algunos te reordenan el CSS (cuidado con esto último que se pude liar).

La única desventaja a mi parecer que puede tener esto es que hay que hacerlo a mano, es decir, que tienes que copiar el CSS, llevarlo a alguna aplicación que haga el trabajo y pegar en el archivo final el resultado. Esto va a tener una solución por parte de Google no dentro de mucho, que va a comprimir el CSS automáticamente en el servidor sin tener que hacerlo nosotros, informáré cuando esté.

15. Los frameworks pueden ahorrarte mucho tiempo

Hay muchísimos frameworks CSS que pueden ayudarte, sobre todo, a empezar un nuevo diseño. Hay multitud de frameworks, quizá dos de los más famosos sean Blueprint y 960 Grid System. Vale la pena echarles un vistazo, aunque sólo sea por la cantidad de tiempo que pueden ahorrarte.

16. Intenta hacer secciones dentro del CSS

Para que la hoja de estilos quede aún más clara, suele ser bueno “separarla” con secciones, como:

1
2
3
4
5
6
7
8

/*Reset CSS*/
...
/*Header*/
...
/*Body*/ 
...
/*Footer*/
...

17. Usa propiedades que agrupen varias

También se suelen llamar “shorthand”, y nos permite reunir en una sola propiedad varias. Aquí puedes ver un ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12

#principal {
	margin-top: 12px;
	margin-rigth: 10px;
	margin-bottom: 8px;
	margin-left: 12px;
}	                  
 
/*Lo mismo que: */
 
#principal {
	margin: 12px 10px 8px 12px;
}

También hay otras, como font, padding, border…etc

18. El SEO está en el HTML no en el CSS

Cuando pienses en optimizaciones SEO para una página, tienes que tener en cuenta que lo importante es el HTML, no como se vea. Si tienes 10 elementos h1 y a cada uno le das un estilo para que parezcan h1, h2, h3 lo estás haciendo mal. Google no tendrá en cuenta eso, sino que realmente tienes 10 “titulares” en una misma página, lo cual no es muy lógico.

En este línea, pasa algo parecido con muchos textos, que se ocultan con CSS, pero en realidad no se ven. Algo que no le suele gustar a Google y se considera spam, en la mayoría de los casos. Por tanto si usas CSS para ocultar algo que está en el HTML lo estás haciendo mal.

19. Usa Sprites

Los sprites en CSS son un conjunto de imágenes puestas juntas en una sola imagen más grande, y en vez de poner las imágenes directamente en HTML, se seleccionan con la propiedad de CSS background-position, de tal forma que solo se tiene que mandar una imagen y se ahorra ancho de banda.

Además ahorra un problema un poco tonto, pero que personalmente no me gusta nada. Cuando hacemos hover sobre una imagen y esta debe cambiar pasa un rato hasta que se recibe la imagen. Si se usa un sprite la imagen ya estará en el cliente y no se tendrá que esperar.

20. Código sostenible = Código limpio

Esto se puede aplicar a todos los lenguajes, pero hablando de estilos con CSS, tenemos que tener en cuenta que si creamos un archivo de 300 líneas, algo bastante común, al menos tenemos que hacerlo fácil de leer. Por ejemplo:

1
2
3
4
5

.caja {
	color: #FFF;
	background-color: #000;
	width: 312px;
}

Queda mucho más limpio que:

1

.caja {color: #FFF; background-color: #000;width: 312px;}

Por supuesto que esto también va en gustos y que el segundo ocupa menos en bytes, pero como he dicho en el punto 14, es mejor comprimir el CSS en una versión y en otra tenerla sólo para nosotros donde trabajar y poner los comentarios que queramos sin preocuparnos de que después se verán.