English Português

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”.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Rocio / Hace 9 años /

      Yo no sé si se puede pero intenté modificar esta plantilla http://grungy-btemplates.blogspot.com/ , pero no me sale las imágenes se distorcionan. Basicamente lo que quiero es ponerla un poco más ancha el lugar donde va el ‘post’ no se si sea posible.

      Por favor.

      Saludos.

      Responder a Rocio →
    2. Rocio / Hace 9 años /

      Quisiera que me ayudaran con esta plantilla. (puse un comentario anterior pero se borró).

      http://grungy-btemplates.blogspot.com/
      Basicamente quisiera saber si es posible poner más ancho el lugar donde va el post.. intenté hacerlo pero salen distorcionadas las imágenes. Me ayuda por favor.

      Responder a Rocio →
    3. Diego / Hace 9 años /

      Muy buen post, yo le agregaría organizar la hoja de estilos para que no sea casi imposible encontrar algo después:

      /*—-GENERALES—*/

      /*—-PRINCIPAL—*/

      /*—-FORMA DE CONTACTO—*/

      Etc..

      Saludos!

      Responder a Diego →
    4. Luis / Hace 9 años /

      Estar programando, resulta habeces muy estresante, ya sea en cualquier lenguaje, que te falto una coma, cerrar esto, etc.
      Yo no se mucho de CSS pero supongo que es lo mismo.. 🙂

      Saludos

      Responder a Luis →
    5. dominguero / Hace 9 años /

      Yo he desistido humillantemente de intentar pelearme con el CSS de los blogs.

      Responder a dominguero →
    6. Guiller / Hace 9 años /

      No hay que pelearse con los css, hay que mimarlos. 🙂

      Responder a Guiller →
    7. Antony / Hace 9 años /

      Hola! Muy bueno este post…

      Responder a Antony →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad