Tecnología y Coaching para Emprendedores

5 Principios para Crear un Código CSS Limpio y Optimizado

css

Hace unos días un cliente me pidió el mantenimiento del sitio web que le había creado otra empresa. Cuando me miré el archivo CSS le dije inmediatamente que no me interesaba. Motivos: un código tan caótico que habría tardado más en descifrarlo que en mantenerlo. Etiquetas del estilo “tab1_der”, “parrafo7” y “Titulo12_index”. Vuélvete loco para entenderlo. En este artículo veremos como crear un código CSS limpio y optimizado, no sólo para que lo puedan entender otros desarrolladores web, sino que tenga un tiempo de carga optimizado.

1. Crea un código semántico

El hecho de utilizar etiquetas descriptivas hace el código más legible y fácil de mantener. Así, no hace falta rebautizar el footer como “pie_abajo” o “final”, no hace falta reinventar la rueda, el footer es el footer y punto.

Si por ejemplo tenemos un apartado donde describimos los detalles, no hace falta llamar la etiqueta “submenu2_index”, lo llamamos “detalles” y no nos complicamos la vida. Si en un párrafo vamos a mencionar los servicios que ofrecemos, no usemos la etiqueta “parrafo7_top”, llamémosla por su nombre: “servicios”.  Palabrita que no me lo invento, aquí un ejemplo del código de este cliente al que le dije que no me interesaba hacer su mantenimiento web:


Ya me diréis a qué se refiere “cuerpo9401” y “destacado_dos”. Entono el mea culpa de que yo en algunas ocasiones tampoco he creado código semántico, pues hace muy poco que me dedico al diseño web y no lo sabía, pero ahora que lo sé, tengo claro que es un principio al que no se puede faltar si queremos ser verdaderos profesionales del desarrollo web.

2. Utiliza un código optimizado (shorthand).

No sabría decir cual es la traducción de shorthand en castellano, ¿alguien lo sabe? Utilizar un código shorthand optimiza el tiempo de carga y el mantenimiento del código. El código CSS shorthand se refiere a que en lugar de utilizar
[cc lang=’css’]
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
[/cc]

se utiliza

[cc lang=’css’]
p { margin: 10px 20px 30px 40px; }
[/cc]

Aquí mostramos las 4 maneras de especificar los márgenes:

(Imagen de Smashing Magazine)

3. No utilices hacks para IE

Todos sabemos los problemas que da Internet Explorer, que interpreta las cosas como le da la gana. En lugar de utilizar hacks del estilo _main o *main, lo mejor es crear un documento CSS para IE6 y otro para IE7.

[cc lang=’html’]

[/cc]

4.  Revisa el código de los frameworks y CSS resets

Los frameworks y CSS resets son herramientas muy útiles en el desarrollo web, pero no todas las líneas de código que incluyen nos son necesarias. Por ejemplo, puede que incluyan el formateo de tablas y nuestro código no tenga tablas.

Revisa la documentación del framework y cada una de las líneas de código del framework y del CSS, para que se ajuste a tus necesidades y puedas eliminar código superfluo como el ejemplo de las tablas.

Utilizar frameworks y CSS resets es una gran manera de tener un código web optimizado, pero incluirlos sin revisarlos puede llevar a un tiempo de carga más alto, a dificultades en el mantenimiento y a efectos no deseados.

5. Incluye comentarios

Los comentarios nos llevan esos 20 segundos extra que a largo plazo agradeceremos. Nos es útil tanto a nosotros como a quien sea el encargado del mantenimiento web. Además demuestran una mente ordenada y estructurada.

Si utilizas un código semántico como el indicado en el punto 1, no necesitarás añadir tantos comentarios como si utilizas un código tipo “cuerpo9401”. Si quieres optimizar el tiempo de carga, puedes eliminar los comentarios en el archivo del servidor y mantenerlos en localhost.

Para finalizar, mencionaría el uso de los espacios en blanco, pero aquí cada uno ha de trabajar como le sea más cómodo. Yo prefiero tenerlo todos  los atributos en una etiqueta en una sola línea, lo que a su vez aumenta el tiempo de carga, pero esto ya es cuestión de gustos.


Comentarios

  • Peru Binario

    Muy interesante pero claro que aun faltaria mas que agregar como una compresion de css para que la carga sea mucha mas rapida entre otras mas…

    Pero muy bueno Gracias :)
    News & Tech

  • Juan Carlos

    Muy buen articulo y tu blog en general es muy bueno. Felicidades.

    En mi caso aun no puedo acostumbrarme a escribir
    #sidebar {
    }

    Siempre lo hago:
    #sidebar
    {
    }

    Y así es cualquier lenguaje, ¿esto afecta mucho?

    • Sandra

      Gracias, Juan Carlos, me alegro que te guste mi blog! Lo que comentas no afecta para nada, los espacios en blanco no son tenidos en cuenta. Un saludo!

  • Diego Díaz

    Hola Sandra, estoy de acuerdo con los items a tener en cuenta, uno de los más remarcables pienso es el de escribir hacks para IE.

    De hecho con un buen reset y eligiendo bien los estilos se pueden hacer páginas que no necesiten stylesheets para cada versión de IE gt 6.

    Saludos y gracias por tu aporte =)

    • Sandra

      Gracias a ti por comentar:-)
      Yo ya no doy soporte a IE6, pero en muchos casos me encuentro que IE7 sigue dando problemas, por lo que he de crear una stylesheet específica para este navegador. Un saludo, Sandra

  • fatyma

    Muy buenos consejos, ahora entiendo….hummm gracias, me has salvado de hacer malas practicas.

  • Luis Ruiz

    Muy buen artículo. Gracias por estos consejos que aunque todos los sabemos, siempre tenemos que recordarnoslos.
    Por ejemplo, para recordar el orden dentro de la regla de estilo margin, yo me imagino un reloj que empieza a las 12, y sigue el orden, 12:top, 3:rigth, 6:bottom, 9:left.

    Gracias por compartir. :)

  • Enyelber

    Muy buen articulo, estoy justamente aprendiendo css y tendré esto en cuenta

    • Sandra

      Gracias Enyelber, son principios que vale la pena tener presentes.

  • ELiza

    Hola, me gusto tu blog y apenas le empiezo a entender a esto del CSS me gustaria mas informacion para poderlo entender aun mejor

    • eSandra

      Hola Eliza,

      para aprender CSS a nivel profesional te recomiendo mi curso para principiantes:

      http://www.esandra.com/disenoweb/

      sino también tienes algún que otro artículo en el blog sobre CSS.

      Suerte!