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

video - - 7 replies - share

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:

Optimizar CSS, 12 consejos y 4 herramientas

post - - 3 replies - share

Expongo a continuación algunos consejos para la optimización de nuestras hojas de estilos CSS.

1. Selectores ID, Classes, Tags

#logo { margin-top: 1em; }
.ico { margin-left: 1em; }
a { text-decoration:none; }

Los Selectores ID es la forma más eficiente y rápida que hay en CSS para otorgar estilo. Por contra no podemos sobrecargar nuestro CSS usándolos para cada elemento que requiera un mínimo de diseño. En este punto tenemos que pensar de forma creativa y global para usar los selectores de clase, las propias etiquetas y los principios de la cascada.

Read more

CleanCSS – Limpiar y optimizar nuestras hojas de estilo

link - - 3 replies - share
cleancss

Con la ayuda de herramientas como CleanCSS (basado en CSSTidy) podemos optimizar y reducir notablemente el peso de nuestras hojas de estilo.

Hace tiempo hablábamos en este blog sobre como optimizar CSS y hace uso de formas abreviadas. Mediante esta herramienta online podemos probar nuestros ficheros CSS y descubrir mejores formas a la hora de escribir reglas de estilo. CleanCSS nos indica errores y propone alternativas más eficientes, hasta un punto en que ya ni nos hará falta recurrir a este tipo herramientas puesto que acabaremos aprendiendo mejores formas.

Por cierto, existen muchas herramientas similares, esta la descubrí hace ya mucho mucho tiempo y sigue siendo la que mas me convence, ¿conocéis otras aplicaciones parecidas?.

Formas abreviadas para optimizar CSS

post - - leave a reply - share

CSS permite escribir las reglas de forma abreviada lo cual repercute principalmente en dos beneficios:

  • Optimización: La escritura abreviada hace que nos ahorremos muchas líneas de código CSS y esto se traduce en menos bytes a descargar por parte del navegador que accede al sitio web.
  • Legibilidad: Un código con reglas de CSS abreviadas es inmensamente más legible y fácil de mantener.

Read more

Optimizando PHP

post - - 7 replies - share

Aquí expongo algunas cuestiones que pueden ayudarnos a optimizar nuestros scripts en PHP. Sería bonito que hubiera comentarios aportando mas información acerca de este interesante tema.

Read more

Desarrollo de base de datos

post - - 5 replies - share

Como muchos sabemos, ponerse a desarrollar una base de datos con cierta complejidad y tamaño “a ojo” es perder el tiempo.

Para que la aplicación cumpla eficientemente sus objetivos y los resultados sean buenos, debemos seguir un proceso:

  1. Análisis.
  2. Diseño del modelo entidad / relación.
  3. Diseño del modelo relacional.
  4. Lenguaje SQL y base de datos final.

Read more