Programación desordenada: Buenas prácticas CSS

Después de haber escrito una serie de post sobre CSS, creo que es interesante hacer un pequeño resumen sobre buenas prácticas en CSS.

Probablemente vaya actualizando este post con la experiencia que del trabajo del día a día, pero hoy voy a comenzar con lo siguiente:

Todos los documentos tienen que incluir una directiva DOCTYPE. Si quieres saber más, visita DOCTYPE, quirk, strict y un poco más.
Evita en la medida de lo posible, el atributo style (estilos incrustados en el elemento) que como ya sabemos se pasan la especificidad por el forro de los …
Además y sobre la especificad, usa los selectores justos y necesarios. Hay que llegar a seleccionar el o los elementos deseados, utilizando el selector mínimo y menos generalista.
Resetea los estilos del navegador para intentar tener un diseño cross-browser.
- http://meyerweb.com/eric/tools/css/reset/
- http://necolas.github.com/normalize.css/
Utiliza minúsculas tanto para los nombres, propiedades y valores de una regla css. Esto se recomienda porque parece que algunos navegadores antiguos tienen problemas con las mayúsculas.
Si tienes que separar palabras en el nombre de un selector, utiliza el guión en vez del guión bajo. De igual modo, parece que algunos navegadores antiguos tienen problemas con el guión bajo.
Los nombres de los selectores tienen que tener un significado relativo al contenido y no a su disposición o estructura. Es decir, mejor “barra-navegacion” que “izquierda”, porque ¿Qué pasa si mañana la izquierda es derecha?
Si tienes alternativa, evita el uso de hacks. Para intentarlo lo mejor es diseñar en la última versión del navegador de turno (que será la que mejor soporte los estándares actuales) y después ver cómo queda en versiones anteriores del mismo navegador. Si inviertes los términos y en vez de partir de un código estándar hacía un código un poco más personalizado, es al revés, entonces seguro que tienes millones de hacks.
La mitad de los hacks que vas a necesitar son para IE y en ese caso yo particularmente prefiero utilizar los comentarios condicionales para IE que funcionan de maravilla.
Ordena las propiedades de una regla siempre del mismo modo. Es decir, si prefieres en orden alfabético, pues siempre en orden alfabético, pero por otro lado también puedes ordenarlas según su grupo principal de aplicación (formato, caja, etc.). Esto te ayudará cuando vuelvas sobre tu código tiempo después para buscar que hace exactamente tu regla.
Elige un solo idioma para el nombre de tus selectores. Es decir, ver en la misma hoja de estilos “navigation” y “navegacion” no es recomendable.
Agrupa clases en la medida en que puedas, esto te llevará a tener menos código y más legible.
Si lo crees oportuno, antes de publicar en producción comprime tu código. Por ejemplo en http://www.csscompressor.com/
Primero se diseña la estructura en HTML y después se ornamenta en CSS, no al revés.
Usa propiedades agrupadas (shorthands) cuando puedas. Es decir, mejor “margin: 5px” que no “margin-right: 5px;”, “margin-left: 5px”, etc. Por cierto, la regla nemotécnica para estas propiedades son el sentido de las agujas del reloj. Es decir arriba (top), derecha (right), abajo (bottom) e izquierda (left). Por curiosidad, decirte que hay otra regla nemotécnica que es la palabra TRouBLe (problema).
Definir un background-color y no asumir que será blanco, el usuario podría haberlo modificado y dar al traste con tu diseño.
Comenta tu código. Recuerda que tiempo después volverás sobre él y quizás ni tú mismo sepas que significa ese extraño código “indescifrable”.
Estructura tu hoja de estilos en secciones. Por ejemplo /*cabecera*/, /*cuerpo*/, /*pie*/, etc. Así después será más sencillo ubicarte en tu código.
Cuando estés trabajando con las pseudo-clases de los enlaces, ten en cuenta la siguiente regla nemotécnica “LoVe/HAte” (amor/odio). Esto es que el orden correcto es “link, visited, hover, active”, cualquier otro orden te dará problemas.
No pongas comillas en las rutas de imágenes css (parece ser que IE5/Mac se lleva mal con esto).
Evita el uso de !important;
Evita en la medida de lo posible el uso del posicionamiento absoluto.
El punto y coma ; final para la última propiedad de la regla, no es necesario. Pero yo, personalmente, me gusta ponerla porque si mañana amplias las propiedades no tienes que recordar escribir de nuevo el punto y coma.
Si quieres centrar elementos, ya sabes que margin: 0 auto; es la solución. De todas formas hay otras muchas maneras de lograr centrar un elemento http://ksesocss.blogspot.com/2012/05/centrando-al-centro-con-css-16-maneras.html
Si utilizas posicionamiento flotante, por favor, acuérdate de limpiar los floats (clear).
Intenta utilizar las etiquetas HTML para lo que fueron diseñadas originalmente. Es decir,  no es negrita sino resaltado,  no es cursiva sino énfasis, etc.
No te hagas tus propios encabezados (). Lo que tienes que hacer es utilizar los encabezados de HTML (h1, h2, …).
No des saltos entre encabezados HTML. Es decir, si en mi página hay un h3, tiene que haber también un h2 y un h1.
No utilices para crear espacios en blanco en el documento. Para eso está el margin-top o margin-bottom.
Formatea tu código CSS siempre con el mismo estilo. Es decir, espacios entre propiedades, entre las llaves de apertura y cierre de la regla… la verdad es que para eso Ctrl+K, Ctrl+D en Visual Studio facilita mucho la vida.