Errores comunes al trabajar con CSS. Evítalos! (y haz tu vida más fácil)…
| April 30, 2010 | Posted by Hakel under CSS, DISEÑO WEB |
Hoy hablaremos un poco de las hojas de estilo en cascada, CSS. Cómo ya sabrán, la idea del CSS es separar la estructura del documento de su presentación. Como te imaginarás, entre sus muchas ventajas, es tener el control centralizado de la presentación de un sitio web.
Lamentablemente, quienes empiezan en el diseño web, tienden a aprenderlo sin seguir los estándares, y no le dan la importancia que se le debe dar a una de las mejores tecnologías web, al grado de pensar que no existen las mejores prácticas de CSS. L
El resultado? Diseños mal elaborados, llenos de errores y horas y horas perdidas en tratar de resolver un problema que se pudo haber evitado desde un principio.
Es por esto, que hoy les explico algunos de los errores más comunes que los desarrolladores web cometen (e ignoran como solucionarlos).
1. No leer las especificaciones
Seamos sinceros, cuando tienes una duda, o algo no te queda claro al maquetar en CSS, ¿a quién acudes? ¿Dónde te informas? ¿foros, páginas web, compañeros diseñadores? Cuidado! Regularmente, cuando un diseñador intenta a explicarle a otro, regularmente omite o se equivoca por lo menos en un par de cosas, y esto ocurre aún más si el primero, no tiene una experiencia y un conocimiento serio de CSS. Cuando esto sucede, -ojo, no digo que no recurras a tus compañeros- es mejor recurrir al estándar (la página W3C CSS2 rev1 es hasta el momento, la única con información completamente detallada de las características de CSS.)
Recuerda, el estándar está cambiando continuamente, lo mejor que puedes hacer, es estar al día.
2. No usar los validadores
Aunque te parezca difícil de creer, hay páginas como Amazon, CNN, Facebook, Yahoo, tienen su buen conjunto de errores, la mayoría de ellos resulta extraño y hasta fuera de lugar encontrarlos en ellas.
Así que, asegúrate de validar tus páginas, así lograrás que se vea bien en todos los navegadores que soporten los estándares, y al final, trabajarás menos para corregir un detallito en un navegador, y otro detallito en otro.
3. Demasiados Divs
Uno de los más grandes y error frecuente de quienes empiezan a diseñar en web, es lo que comúnmente se conoce como Sopa de Divs. ¿Qué significa esto? Qué para lograr un determinado efecto (la mayoría de las veces, simple) se usan demasiados DIVS.
¿Qué problema tiene el usar tantos divs? Sencillo, tu página se tardará un poco más en cargar (y ya hemos hablado antes sobre la importancia de que una página cargue más rápido), se necesita escribir más código CSS, el parseo del DOM es más lento, y, el código se vuelve menos mantenible (lo cual implica más trabajo para ti a largo plazo).
4. Insertar CSS dentro del HTML
Debemos utilizar CSS siempre que podamos, haciendo la llamada desde el elemento hacia una clase, y no poniendo el código CSS dentro del elemento. Nuevamente, esto te ahorrará tiempo a la hora de cambiar los estilos de la página, y podrás usar la clase, para otros elementos que requieran el mismo estilo.
5. ID vs Class
Este es un problema común con diseñadores de CSS que no han aprendido el lado lógico de este. Para clarificar: IDs son para un solo elemento y clases son para muchos elementos.
De cualquier manera no hay que aplicarle clases a todas las colecciones de elementos. Si puedes encapsular una colección de elementos en un ID único, ya no necesitaras el atributo class dentro de estos. Esto ahorra ancho de banda y tiempo de desarrollo.
Cambia:
<div class="color-green"></div> <div class="color-green"></div> <div class="color-green"></div> <div class="color-green"></div> <div class="color-green"></div>
.color-green{ color: green; }Por:
<div id="color-green"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
#color-green div { color: green; }
Cierto, agregamos un div más pero tiene un valor especifico, ahora tenemos ID unico y de esa manera nos ahorramos 5 clases (class).
6. No definir los atributos con la estructura correcta
Si tú has programado antes en algún lenguaje de programación como C o Java, sabrás que tu programa no se compila si alguna línea no termina con punto y como “;”.
Sabes qué pasa si omites al final de un atributo el punto y coma, en CSS? Sencillo! El siguiente atributo no será leído. Así que asegúrate de cerrar cada atributo con su respectivo “;” mientras estés escribiendo el código, y evítate dolores de cabeza posteriores.
7. Uso incorrecto de unidades de medida.
El tamaño de las fuentes, no las declares en pixeles! Esto, créeme, te lo agradecerá el usuario. Es bien cierto, que la resolución más común hoy en día es 1024×768, pero también es cierto que cada día hay monitores con resoluciones mayores, por lo tanto, el texto deber ser flexible, considera que leer un texto 10px, en una pantalla de 1920×1080 resulta realmente cansado y se convierte en una pérdida de tiempo para el usuario.
Soluciona este problema declarando el tamaño de las fuentes con la unidad em, como esto: font-size:1.2em, Esto quiere decir que el tamaño de la fuente de un particular elemento es 1.2 veces el tamaño de fuente predeterminada del navegador.
Un beneficio muy importante de esta práctica es que el tamaño de la fuente de todo el sitio puede ser incrementado simplemente cambiando la etiqueta BODY (o cualquier otra etiqueta contenedora) usando la propiedad font-size, efecto que resulta imposible si manejas medidas en pixeles.
El tamaño de las fuentes tampoco debería ser declarado en puntos (pt), centímetros (cm), o cualquier otro unidad de medida, tampoco porcientos (1em=100%).
8. Caracteres y tildes del español en los selectores, clases y valores.
Este error es muy frecuente en los diseñadores de habla hispana. Siendo programador o diseñador, lo primero que tienes que aprender, es que los nombres de clases, de selectores, en los valores (y en las variables) no puedes usar tildes (acentos) o símbolos como la ñ, ya que no podrán ser ejecutados correctamente.
Estos, son solo algunos de los errores más comunes al maquetar con CSS. Si a ti te ha pasado alguno que no hemos mencionado, coméntanoslo. Y si te ha pasado alguno (o varios) cuéntanos tu experiencia.
Entradas relacionadas:
Comentarios recientes