A la hora de crear un sitio con CSS, seguramente te has encontrado con un montón de asuntos que más de una vez te han hecho dar ganas de golpearte la cabeza contra la pared. Dave Shea, ha escrito este artículo, que es un intento de hacer el proceso de diseño más fácil y una referencia rápida para ver cuando estás en algún problema.
Si tienes algún ítem para agregar, por favor siéntete libre de hacerlo aquí.
Hay traducciones disponibles en: inglés (el artículo original), francés, alemán, holandés, italiano, húngaro, finlandés, ruso, portugués, japonés y chino simplificado. Siéntete libre de proveer más.
Cuando estés con dudas, valida.
Cuando se procede con el debug, te puedes salvar de muchos dolores de cabeza simplemente validando el código como primera medida. XHTML/CSS escrito inapropiadamente causará muchos fallos técnicos.
Construye y testea tu CSS en los browsers más avanzados disponibles antes que en los otros, no después.
Si construyes y testeas un sitio en un browser "quebrado" (no conforme a los WebStandards), tu código estará relegado al modo "quebrado" de renderización de aquel browser. Cuando viene el tiempo de testear en browsers compatibles con los estándares, te frustrarás con una renderización impropia. Por lo tanto, empieza desde la perfección y a partir de ahí empezar a corregir con hacks para los browsers más viejos y menos compatibles. Tu código será más compatible con los estándares desde el inicio, y no serán necesarios muchos hacks para que funcionen en los otros browsers. Actualmente, los browsers estándares son Mozilla, Opera y Safari.
Al utilizar floats para el layout, asegúrate de asociarlos correctamente con la propiedad clear.
Los float son engañosos y no siempre se comportan como lo esperas. Si un float se extiende más alla de los bordes de un elemento contenedor, o no se comporta como esperas, asegúrate de que lo que quieres es posible. Chequea el tutorial de Eric Meyer sobre el tema.
Para evitar la sobreexposicion de los márgenes, aplica padding o border.
Debes "luchar" con el espacio en blanco extra donde no quieres ninguno o la inexistencia de este en donde sí lo quieres. Si estás usando márgenes, la sobreposición de los márgentes probablemente sea el responsable. Andy Budd explica cómo ganar esa "lucha".
Intenta evitar la aplicación de padding/borders y un ancho fijo en un elemento.
IE5 interpreta el boxmodel mal, lo que trae muchos problemas. Hay muchas formas de resolver el problema, pero lo mejor técnica es aplicar el padding a un elemento padre en vez de aplicarlo al elemento hijo que tenga el ancho fijo.
Evita el "flash" en el contenido sin estilos que aparece al cargar una página en IE.
Si usaste @import para linkear una hoja de estilos externa, tarde o temprano verás que el IE, al cargar una página provoca un "flash" en el contenido HTML sin formato antes de que el CSS sea aplicado en la página. ¡Esto se puede evitar!
No cuentes con el min-width en IE.
IE no ofrece soporte para el min-width. El IE considera width como min-width hasta cierto punto, por ello, con un poco de filtros para el IE, puedes simular el mismo resultado.
Cuando dudes, achica los anchos.
Algunas veces, los errores de redondeo producen cosas como 50%+50% igual a 100.1%, lo cual acaba arruinando el layout en algunos browsers. Trata de usar 49% en lugar de 50% o tambien 49.9%.
¿Contenido mostrado impropiamente en IE?
Es posible que sufras el bug Peekaboo, especialmente si el error aparece en un evento mouse-over. Mira position is everything para corregirlo.
Cuidado al estilizar links si estas usando anclas (anchors).
Si usas anclas en tu código (<a name="anchor">), observarás que éstas asumen las estilizaciones de las pseudoclases :hover y :active. Para evitar esto, usa id para las anclas, o usa sintaxis más específica: :link:hover, :link:active.
Asegúrate de que los efectos que buscas realmente existen.
Existen extensiones CSS específicas para determinados browsers que no son parte de las especificaciones oficiales. Al aplicar filtros o formatear la barra de scroll, estás trabajando con código propietario que sólo va a funcionar en IE. Si el validador te dice que el código es indefinido, es muy probable que sea código propietario, por lo tanto no van a funcionar bien en el resto de los browsers.
Divide y conquista: usa comentarios para "apagar" grandes secciones del estilo.
Especialmente útil cuando trabajas con hojas de estilo largas y a las que no estás familiarizados. Por ejemplo, tienes un error y no conoces la hoja de estilo usada, si comentando la mitad del CSS en cuestión el error persiste, entonces el error se encuentra en la otra mitad. Comenta lo que queda y prueba de nuevo. Si el problema ya no se presenta, es que está en la sección comentada. Perfecciona el comentario y prueba. Continúa hasta que el problema se resuelva.
Recuerda el proceso mnemónico LoVe/HAte para los links.
Al estilizar pseudo-clases para los links, siempre hazlo en este orden: Link, Visited, Hover, Active. Cualquier otro orden no trabajará consistentemente. Si usas :focus modifica el orden a LVHFA (o Lord Vader’s Handle Formerly Anakin”, como lo sugirió Matt Haughey).
Recuerda el proceso mnemónico "TRouBLEd" para los bordes.
Border, margin y padding admiten declaración abreviada en un orden preestablecido: en el sentido horario a partir de arriba, o sea: arriba (top), derecha (right), abajo (bottom) e izquierda (left), entonces margin:0 1px 3px 5px; significa que el margen superior será de 0 (cero) 1px para el margen derecho, 3px para el de abajo y 5px para el de la izquierda.
Declara siempre las unidades para los valores diferentes de cero.
El CSS requiere que especifiques las unidades en todas las cantidades, tales como fonts, margins y tamaños (la única excepción es el line-height, que extrañamente no requiere la especificación de unidad). El comportamiento particular de un determinado browser cuando una unidad no fue especificado, no debe ser considerado. Cero es cero, sea en px, em o lo que sea. No hay necesidad de especificar unidad alguna. Ejemplo: padding:0 2px 0 1em;
Prueba con diferentes tamaño de font.
Browsers avanzados como Mozilla y Opera te permiten redimensionar el tamaño del texto independientemente del tamaño especificado. Algunos usuarios utilizarán tamaños por defecto diferentes al tuyo, por ello intenta acomodar tu layout al mayor rango posible.
Utiliza la misma grafía en tu HTML y CSS.
Algunos browsers son case-sensitive (sensibles al tamaño de la letra). Usar una clase llamada homePage esta bien, pero aplicando el estilo como homepage causará problemas en browsers que renderizan en modo estricto (como el Mozilla por ejemplo).
Prueba tus CSS embebidos en el HTML, lanza el sitio con los CSS importados.
Si trabajas con la hoja de estilos embebida en código fuente del HTML, eliminas cualquier error de cache mientras testeas. Esto es muy importante cuando trabajas en algunos browsers en Mac. Pero luego, asegúrate de mover tu CSS a un archivo externo, importado con el @import o <link> antes de publicar.
Agrega bordes evidentes para ayudar a corregir tu layout.
Una regla universal tal como div {border.1px solid #00;} puede ser una poderosa aliada para identificar un problema en el layout. Pero agregando bordes a elementos específicos puede ayudar a identificar sobreposición o espacio en blanco extra no deseado que de otra forma no podriamos identificar.
No uses comillas simples en los paths para las imágenes.
Cuando especifiques una imagen de fondo, no uses comillas simples para la imagen. No son necesarias y además IE5/Mac no las soporta.
No hagas links a hojas de estilo vacias para usarlos de "placeholders" (ej handheld o print).
IE5/Mac no soporta hojas de estilo vacias y como consecuencia, el tiempo de carga aumenta. En vez de eso, coloca por lo menos una regla (o tal vez un comentario) en la hoja de estilo para atender especificamente al IE5/Mac.
Y ahora, a partir de aquí, algunos items que no necesariamente se aplican al lado funcionalidad de las cosas, pero deben ser considerados cuando se desarrolla:
Organiza tu archivo CSS.
Asegúrate de comentar los bloques del CSS apropiadamente, agrupa los selectores parecidos entre si y establece una clara separación y nomenclación entre ellos, usa espacios en blancos para formatear tu código (recomendación: usa espacio simple para compatibilidad con diferentes plataformas).
Nomina los class/ID basados en su función en el código, no en su apariencia.
Si defines una clase por ejemplo .grandeazul, y después se te solicita cambiar el texto a pequeño y rojo, el nombre de la clase deja de tener lógica. En vez de eso, usa clases con nombre descriptivo de su función como por ejemplo .textoDestacado.
Usa los filtros CSS como último recurso.
Los hacks y los filtros del CSS pueden ayudarte a aplicar o a no aplicar selectivamente diversas directivas en varios elementos. Pero su uso indiscriminado no es aconsejable, trata de buscar una manera más estándar y para lograr tu objetivo. Si bien, estos hacks y filtros pueden llegar a ser la salvación, en lo posible trata de evitarlos. Aquí hay una larga lista de filtros.
Combina los selectores.
Mantener tu CSS liviano es importante para minimizar los tiempos de carga; siempre que sea posible, agrupa los selectores, saca partido de la herencia del CSS, y reduce las redundancia usando declaraciones abreviadas.
Considera la accesibilidad cuando usas técnicas de reemplazo de imágenes.
La clásica técnica de FIR para el reemplazo de imágenes tiene problemas para los screenreaders y para todos aquellos que tienen desactivada la carga de imágenes. Existen alternativas, usalas moderadamente.
Nota: esta traducción la hice en el castellano más neutro posible para que cualquiera pueda ponerlo en su blog
Nota al margen: Por si quieren hacer algún comentario o sugerencia, pueden hacerlo aquí. A esta página en especial la puse directamente aquí por la importancia que me parece que tiene
