Blog and Web

Para hacer las cosas bien al trabajar con CSS tenemos un abanico de opciones tan gran como nuestro dominio del lenguaje, pero para que las cosas salgan mal hay una cantidad enorme de errores que podemos cometer.

En CSSNewbie nos muestran 5 de los errores más comunes al manejar css, al que agrego otro propio de nuestro lenguaje.

1. No cerrar los corchetes.

   Mientras definimos los atributos de cada elemento, nuestro código se llena de un mar de corchetes abriendo y cerrando, por lo que dejar uno abierto es sumamente fácil y causará que todo el código abajo de él no trabaje debidamente. Para evitar este error hay que ser muy ordenado con nuestro código y para encontrar este corchete abierto el firebug es una estupenda herramienta.

   #conteneiner {
   width: 100%;
   margin:0 auto;
   /* Falta el corchete de cierre, todo el código siguiente no tendrá efecto */
   #header {
   background-color: #fff;
   font-size: 0.8em;
   }

2. No listar los atributos adecuadamente.

   Un problema similar al anterior se presenta al listar los atributos de cada clase o selector, cada atributo debe terminar con un punto y coma. No terminar un atributo con el punto representará automáticamente la anulación del siguiente atributo, creándonos un dolor de cabeza para buscar porque no se aplica un color, un tipo de letra, etc.

   #header {
   background-color: #fff
   /* Falta el punto y coma que termina un atributo, el siguiente atributo no será leido */
   font-size: 0.8em;
   }

3. Escribir mal el nombre de un selector o clase.

   Todos tenemos malas pasadas con el teclado y escribir código no es la excepción. Hay que tener cuido al escribir correctamente el nombre de la clase o selector porque de otro modo simplemente es como si no existiera.

   #haeder {
   /* la cabecera regularmente se escribe "#header", no "#haeder", esto hace imposible su lectura */
   background-color: #fff;
   font-size: 0.8em;
   }

4. Escribir mal el nombre de un atributo.

   Muy similar al anterior, pero cometiendo el error de escribir mal un atributo, que provocará que simplemente no se aplique.

   #header {
   background-color: #fff;
   fotn-size: 0.8em;
   /* El atributo "fotn-size" no existe y no podrá ser leído, el correcto es font-size */
   }

5. Confundir el valor de los atributos.

   Cada atributo tiene una cantidad de opciones predefinidas que no deben ser confundidas. Esto lo da la experiencia y después de consultar la literatura debida. Dar mal el valor a un atributo hará que sea reconocido.

   #header {
   background-color: #fff;
   font-size: 0.8em;
   vertical-align: center;
   /* La alineación vertical no permite "center", en ella se usa el valor "middle" para alinear al centro verticalmente */
   }

6. Acentos y caracteres del español en clases y selectores.

   Como hablantes del español es muy tentador usar las palabras tal como las dicta el diccionario, pero para nuestra desgracia, los acentos y caracteres propios del español (como la ñ) son tomados como caracteres extraños en varios navegadores y por tanto, convertidos en sus equivalente, algo poco que resulta recomendable y que en muchos casos se traduce en que ni las clases, ni sus atributos sean aplicados.

   #píe-de-página {
   /* Aunque nos gusten los acentos (¿si?), su uso es muy poco recomendado */
   clear: both;
   font-size: 0.7em;
   }

Estos son errores que seguramente la mayoría que ha trabajado con CSS ha cometido o cometerá alguna vez. La recomendación general es ser lo más organizado con el código, para que en verdad el código sea “poesía”.