CSS: Consejos y buenas prácticas

Justo esta semana pasada empezamos en la oficina una fase de revisión de marcado y de
css de una web bastante grande, y en la que participaremos varios desarrolladores. Ésto
nos ha obligado a acordar algunas convenciones a la hora de trabajar, en cuanto a
codificación, estructura, nomenclatura… y a plasmarlas por escrito para que todo el
equipo, ahora y en el futuro, pueda consultarlas en un documento de referencia.

En esa guía, además, hemos tratado de incluir algunas recomendaciones de “buenas

prácticas” entre las que voy a tratar de resumir algunas de ellas, las más importantes a
mi entender.

Consideraciones previas
• Asegúrate de definir siempre un DOCTYPE, ¡y úsalo!
De otra forma, el navegador entrará en el Quirk Mode, aumentando el tiempo de
renderizado y provocando algunos desajustes en cuanto a la interpretación de
ciertas propiedades CSS.
• Evita usar estilos incrustados o elementos presentacionales en tu marcado.
Reserva etiquetas <strong> y <em> para aquellos textos que realmente requieran
ser enfatizados, y nada de estilos incrustados con styles dentro de tu código
HTML. Los estilos SIEMPRE separados del contenido.
• Valida tu código a medida que codifiques.
Te evitarás muchos dolores de cabeza al final del proceso. Gran parte de
problemas de renderizado son consecuencia de marcado no válido.De igual
forma, asegúrate de que esa propiedad tan molona de CSS que estás usando sea
estándar y no exclusiva para IE.
• Resetea las propiedades CSS para eliminar diferencias entre navegadores
desde el principio.
Es muy buena idea empezar tu hoja de estilos general con una serie de
declaraciones que reseteen propiedades como los margin, los padding y los
border de los elementos más comunes. Echa un vistazo al reset.css que ofrece la
librería de Yahoo o al artículo de Daniel que lo comenta más a fondo.
• Usa el navegador más moderno y con mejor soporte de los estándares
durante el desarrollo y el testeo, antes de probarlo en los navegadores
“problemáticos”, y no al revés.
Puede que no sigas esta norma y no tengas ningún problema, pero si testeas
primero en IE6 tienes muchas probabilidades de terminar con un CSS lleno de
hacks, o peor, de terminar metiendo “hacks” para los navegadores que sí
cumplen los estándares. Tu objetivo tiene que ser conseguir el código y el CSS
más limpio y cross-browser posible y, créeme, la mejor manera de conseguirlo
es ésta.
• Usa el menor número de archivos posible. Es mejor un sólo archivo de 30Kb
que 3 archivos de 10Kb.
Piensa que para cada uno de los archivos estáticos enlazados desde un
documento HTML ( CSS, Javascript, imágenes, etc… ), éste debe realizar una
conexión HTTP y lanzar una petición, con sus correspondientes cabeceras,
cookies si las hubiere… todo suma y al final, tanto en tamaño como en tiempo
de descarga, penalizarás al usuario.
Estructura, nomenclatura y otras yerbas
• Sea cual sea, trata de ser consistente en el idioma usado cuando codifiques,
tanto en los nombres como en los comentarios.
Esto toma especial importancia en grandes equipos o con personas de diferentes
procedencias.
• Usa siempre minúsculas y guiones o guiones bajos para separar palabras.
Algunos navegadores antiguos han demostrado tener problemas con
mayúsculas-minúsculas, así que ve a los seguro.
• Sé descriptivo en los nombres y huye de usar aquellos que se refieran a la
apariencia de los elementos.
Mejor usar un #main-product que un #m-prod, y nada de clases del tipo
.centered, .red… O te encontrarás con que cuando toque cambiar el color o la
alineación de contenidos, tendrás que ir modificando las clases de cada
elemento… ¡¿Dónde están entonces las ventajas de gestionar el diseño desde
una hoja de estilos?!
• Trata de sacar partido de la cascada
Evita crear demasiadas instancias siempre que no sean imprescindibles. Por
ejemplo
#main_table { width:100% }
#main_table th { font-weight:bold; text-align:center }
#main_table td { text-align:right; font-size:1.5em }
es mejor que
#main_table { width:100% }
.cell_header { font-weight:bold; text-align:center }
.cell_contents { text-align:right; font-size:1.5em }
Además, los nombres pueden ayudar a ubicar un elemento dentro de la jerarquía
de capas. Por ejemplo, posiblemente sea mucho más práctico usar #header_logo
que no #logo a secas.
• Usa criterios consistentes para organizar las declaraciones de estilos dentro
de tu CSS.
Puedes decidir enunciar las declaraciones según su orden de aparición dentro del
código, o agruparlas por el tipo de elemento al que se refieren ( listados,
titulares, imágenes… ) Sea cual sea, que éste sea constante, o te vas a volver
loco cuando la hoja de estilos adquiera un tamaño importante…
• Trata de comprimir lo más posible el archivo resultante.
Ésto lo puedes conseguir no sólo eliminando espacios y saltos de linea sobrantes
en tu hoja de estilos mediante alguno de los compresores gratuítos disponibles
en internet, si no configurando tu Apache para que sirva comprimidos los
archivos determinados tipos de archivos ( HTML, Javascript, CSS ). Piensa que
algunos archivos estáticos se enlazan desde todas ( o casi ) las páginas de tu site.
Puedes ahorrarte mucho tráfico con esto.
• Evita usar comillas alrededor de las llamadas a imágenes.
Todos los navegadores lo entenderán correctamente. Con comillas, en cambio,
tendrás problemas en IE para Mac. Pudiendo tenerlos a todos contentos…
¿porqué no hacerlo?

Consideraciones adicionales
 • En el 90% de los casos, la solución más sencilla será la que
menos problemas dé entre navegadores. KISS.
Normalmente podrás usar varias combinaciones para conseguir el
mismo efecto visual. Trata de encontrar la combinación más simple
de elementos y propiedades. Mezcla paddings en el contenedor e
hijos, margins e indentaciones negativos, y suma algunos
posicionamientos absolutos en elementos anidados y tendrás los ingredientes
perfectos para un bonito… caos.
• Los hacks son la última solución.
Invierte hoy 30 minutos más en encontrar la alternativa cross-browser y ahórrate
horas la semana que viene tratando de modificar tu hoja de estilos.
• Una mala y una buena noticia: ¿La mala? No te asustes, pero sí, algunos
navegadores tienen bugs de render, sin explicación ni justificación alguna.
¿La buena? En sitios como PositionIsEverything han identificado muchas de
ellas y pueden ahorrarte algunos quebraderos de cabeza. Un simple e inocuo
position:relative; o un zoom:1; solucionan muchos de estos bugs.
• En la línea de lo que comentábamos al principio respecto a la cantidad de
archivos CSS a enlazar desde tu página, hay algunas técnicas que pueden
ayudarte a reducir la cantidad de archivos de imagen que uses para
construir tu página: CSS Sliding Doors & CSS Sprites. Hacer más con menos,
keep in mind.
• La guinda del pastel: no te olvides de preparar una hoja de estilos para
impresión. Hace unos días dábamos algunos consejos desde Pixelovers al
respecto en Hojas de estilo para impresión.
• Puedes usar parámetros en la llamada a tu CSS para mantener el control
sobre la caché del navegador, y decidir cuándo debe expirar tu hoja de estilos o
forzar a tus usuarios a descargarla de nuevo en su siguiente visita.