Blog what I write

Optimización de CSS; Nicole Sullivan nos enseña 5 errores típicos y 5 buenas maneras

video - - 7 replies -

Hace un tiempo escribí sobre algunas técnicas para poder optimizar nuestros códigos CSS. También mencionaba herramientas que puede facilitar nuestro trabajo de optimización: Firebug, PageSpeed, YSlow y YUI Compressor.

5 errores típicos

  • Un 42% de páginas no comprimen su contenido con GZIP.
  • Un 44% de páginas enlazan a más de 2 ficheros CSS.
  • Un 56% no sirven el CSS con cookies (o no la entiendo, o esta la veo complicada de evitar sin CDN).
  • Un 63% no minimiza sus ficheros con herramientas como YUI Compressor.
  • Un 21% de páginas tienen ficheros CSS con más de 100K de peso (esta es de escándalo).

Si en nuestros CSS sumamos: demasiada atomicidad, normas, duplicación, conflictos y lo aderezamos todo con algo de impredecibilidad, tendremos por resultado un enorme e incontrolable CSS.

5 buenas maneras

Lo que debemos evitar es:

1. La Atomicidad

Imaginemos una página Web como si fuera un coche. Para crear ese coche usamos piezas de lego, una a una las vamos posicionando hasta crear la figura del coche.

  • Con CSS básicamente hacemos lo mismo, podemos ir pieza a pieza posicionando y creando el sitio web. Y es justamente el planteamiento que debemos cambiar.
  • La idea es evitar pensar en pequeñas piezas (átomos) y pensar en objetos que se puedan reutilizar. De esta manera podemos por ejemplo crear con CSS una rueda del coche, que a su vez bastaría para simular las otras tres restantes.
  • Esto se podría considerar una evolución de la forma de pensar en el CSS.

2. Normas desfasadas

Que van acumulandose, que no se reutilizan, que son incrementales en el tiempo, muy especificas, etc.

3. Normas imprevisibles

Que no pueden ser reutilizadas y que son totalmente dependientes de su ubicación.

4. Guerras de especificidad

Nodos hijos de hijos de otros hijos, hacks, estilos con #ID que no pueden ser reutilizados, la sentencia !important no tiene cabida (si se usa bien la cascada), etc.

5. Duplicidad

Definir en numerosas ocasiones reglas como: margin, float, font-size, etc. Como solución tenemos:

  • He llegado hasta lo de “demasiada atomicidad” y me he dado cuenta que no sé nada de nada. Eso sí, me acabo de grabar a fuego la expresión y pretendo usarla al menos 12 veces al día xDD

    • Me imagino cosas y luego intento explicarlas. A continuación vienen las burradas esas…

  • Hoy por la mañana, sin ir más lejos, el café me ha sabido a demasiada atomicidad. Sé que no concuerda en la frase pero ya sólo me queda usarlo 11 veces!

    • que grande!!!! de todas formas eso fue pq el cafe estaba muy granulado jejejeje 😛

  • Al fin y al cabo de lo que se trata es de renovarse. Cuando uno empieza, normalmente, el css está infestado de redundancias. Hay que cambiar esas malas costumbres.
    Contenido de calidad (como de costumbre) y yo también me quedo con el término de atomicidad, lo que se aprende oye. 🙂

  • Buen artículo, intentaré ponerlo en práctica