Buenas prácticas trabajando con CSS. Una traducción libre de ‘CSS Crib Sheet’ de Dave Shea

Se acabaron las dudas a la hora de crear una maqueta con CSS. Se acabó el tropezar una y otra vez con la misma piedra. Estos consejos que se presentan son un intento de hacer más fácil el proceso de diseño y ofrecer una referencia a la que consultar cuando nos encontremos con problemas en el desarrollo de nuestro cometido.

Este documento es una traducción libre de CSS Crib Sheet, de Dave Shea, realizada por Daniel Torres Burriel, y es posible que haya diferencias con el documento original, fallos de traducción incluidos. Si ves alguno, avisa 🙂

Cuando haya dudas, valida

Cuando estés comprobando tu código que sepas que puedes ahorrarte más de un dolor de cabeza simplementevalidando el código. Un código XHTML/CSS inadecuado puede causar más de una interferencia en la maqueta.

Desarrolla y comprueba tu CSS en el navegador más avanzado antes de comprobarlo en otros menos modernos

Si construyes un sitio web y lo testeas en un navegador que no tiene un óptimo soporte de estándares, tu código se fiará de la deficiente representación que de él hace ese navegador. Cuando lo compruebes en un navegador que haga una correcta interpretación de los estándares web, es posible que el código resulte en una visualizacióndeficiente, con la consiguiente frustación que te generará. Por ello, comienza los desarrollos y los tests en navegadores modernos y tu código será correcto desde el principio. Hoy por hoy estaos hablando de navegadores como Mozilla/Firefox, Safari y Opera.

Cuando hagas uso de floats para maquetar, cerciórate de que hay un clear que hace su trabajo

Los floats son complicados y no siempre funcionan como queremos. Si te encuentras en una situación en la que un float sobrepasa el borde de una caja, de un contenedor, o simplemente no se comporta como esperabas, asegúrate de que lo que haces es correcto. Comprueba el tutorial de Eric Meyer.

Los márgenes se derrumban. Usa relleno o padding, o bordes, para evitarlo

Puedes tratar de solucionar los problemas de espacios en blanco no deseados, o desaeados pero no aparecidos con elementos que no sean margin. Andy Budd lo explica en un artículo.

Trata de evitar el aplicar padding y bordes junto con elementos de anchura fija

Internet Explorer 5 representa de forma deficiente el modelo de cajas, lo que sinifica un verdadero lío. Hay modos de aproximarse a este error pero es preferible, para evitar este problema, aplicar el padding o relleno a un elemento padre en lugar de al hijo, que tenga la anchura fija.

Evita el efecto de contenido sin estilo (Flash of Unstyled Content) en Internet Explorer

Si sólo usas @import para aplicar estilos externos, más tarde o más temprano notarás ese efecto en Internet Explorer, consistente en que por un momento aparezca el contenido del HTML sin estilos. Esto se puede evitar.

No uses min-width en Internet Explorer

Internet Explorer no lo soporta. Pero trata a width como min-with en cierto modo, con lo que con unos pocos filtros para Internet Explorer puedes alcanzar el mismo resultado final.

Ante la duda, reduce los width

A veces, los errores de redondeo son causados porque cuando queremos hacer que 50% y 50% sean 100%, el resultado es 101%, lo cual implica que nuestra maqueta se rompa y se descuadre. Trata de reducir ese 50% a 49%.

¿El contenido no se muestra adecuadamente en Internet Explorer?

Puede que estés siendo victima del Peekaboo bug, especialmente si sucede cuando pasas por encima de un link con el ratón. Puedes revisar la solución en Position is Everything.

Ten cuidado cuando apliques estilos a vínculos, sobre todo si usas anchors

Si usas los típicos anchors, del tipo <a name="anchor"> notarás que toma los valores de las pseudoclases :hover y :active. Para evitar esto debes usar id en su lugar, o sino usar estilos con una sintaxis un tanto más arcaica como :link:hover, :link:active.

Asegúrate de que el efecto que quieres conseguir, existe

Hay extensiones específicas de ciertos navegadores que no son parte de las especificaciones oficiales. Si tratas de aplicar filtros o diseño de las barras de scroll has de saber que estás trabajando con código propietario que sólo funcionará en Internet Explorer. Si le pasas el validador, éste te dirá que estás usando un código indefinido y no funcionará del mismo modo en todos los navegadores.

Divide y vencerás: haz uso de comentarios para estructurar hojas de estilo muy grandes

Esto es especialmente útil cuando se trabaja con extensos archicos CSS que no conocemos. Comentar el fichero CSS por la mitad para ver su efecto. Si el problema que estás trabajando persiste, es seguro que se encontrará en la otra mitad del código. Ve reduciendo el dominio del comentario hasta dar con el problema. Se trata de ganarle terreno a la hoja de estilo.

Ten presente la regla "LoVe/HaTe" cuando se trate de dar diseño a los links

Cuando se especifican las pseudo-clases de un link siempre se ha de hacer siguiente este orden: Link, Visited, Hover y Active. Cualquier otro orden que usemos hará que no funcionará adecuadamente. ´Considera, de igual modo, el uso de :focus y modifica el orden de lat modo: LVHFA. Matt Haughey habla de la regla "Lord Vader’s Handle Formerly Anakin".

Otra regla para recordar esta vez el orden de los bordes

Los bordes, márgenes y rellenos se pueden especificar también a través de atajos o métodos abreviados. Si imaginamos el sentido de las agujas de un reloj nos encontramos con la equivalencia de Top, Right, Bottom y Left. De ese modo margin: 0 1px 3px 5px; significará que no hay margen superior, el margen derecho es 1px, el margen inferior es 3px, y el margen izquierdo es 5px.

Especifica siempre las unidades para los valores diferentes de cero

CSS necesita que especifiques las unidades de medida relativas a tipos de letra, márgenes y tamaños. El comportamiento de cualquier navegador cuando no se especifica la unidad de medida ante un valor de este tipo es no hacer nada. Cero es cero, independientemente de la unidad de medida, pero eso no es así cuando el valor es distinto de cero. No es lo mismo 1px que 1em ó 1% ¿verdad? Un ejemplo padding: 0 2px 0 1em;

Prueba diferentes tamaños de tipos de letra

Los navegadores modernos, como son Mozilla y Opera, permiten redimensionar el tamaño del texto, independientemente de la unidad de medida que se use. Algunos usuariospodrán tener definido un tamaño de letra mayor o menor que el definido por nosotros en la hoja de estilos. Por ello debemos de tratar de acomodar el diseño para un rango de tamaños de letra tan grande como sea posible.

Guarda la consistencia necesaria entre el HTML y el CSS

Algunos navegadores son case-sensitive, es decir, distinguen entre mayúsculas y minúsculas Por ello, usar una clase que se llame homePage es correcto siempre y cuando la invoquemos de la misma forma. Eso sí, si la invocamos de forma diferente, en lo que a mayúsculas/minúsculas se refiere, por ejemplo, homepage, provocará problemas en algunos navegadores, como por ejemplo Mozilla.

Haz las pruebas con CSS embebido; estrena con CSS importado

Si trabajas con la hoja de estilo embebida, incrustada en el fichero HTML te evitarás problemas con el cacheo de los estilos, de tal modo que siempre se cargarán los estilos cada vez que hagas "reload". Esto se recomienda especialmente cuando trabajes con equipos Apple. Pero para poner en producción el sitio web es mucho mejor cargar la hoja de estilos a través de @import o de <link>.

Utiliza bordes para hacer pruebas con la maquetación

Una regla universal como div {border: solid 1px #f00;}, puede jugar un papel de mucha utilidad a la hora de resolver y solucionar un problema con la maquetación del sitio web usando CSS. Pero añadir un borde a elementos específicos puede ayudarnos a identificar problemas de superposición de elementos y márgenes o espacios en blanco que no queremos.

No entrecomilles con comillas simples la ruta de las imágenes

Cuando establezcas una imagen de fondo no entrecomilles la ruta de la imagen. No es necesario y con IE5/Mac no se llevan bien 🙂

No establezcas links a hojas de estilo inexistentes

Por ejemplo, si queremos (en el HTML) incluir en el futuro hojas de estilo para diferentes tipos de medio, no lo hagamos hasta que esa hoja de estilo exista. El IE5/Mac se ahoga cuando encuentra una hoja de estilo vacía, y se incrementa el tiempo de carga. En su lugar es recomendable tener al menos una regla en la hoja de estilo para que a IE/Mac no le afecte.