CSS eficientes según Mozilla

Uno de los temas que me impresiono fue la optimización de las hojas de estilo. Menudo susto cuando vi la enorme lista de prohibiciones llegue a pensar que era mejor no hacerlas, con el tiempo se perfilo mejor el tema y descubrí un que el equipo de Mozilla realizó un resumen muy claro. Os paso la guía para que le echéis un vistazo.

Para empezar, existen 4 tipos de identificadores: ID, class, tags y universales. Cada uno de ellos tienen ciertas particularidades… y se pueden anidar.

Hacer algo de este estilo no sería muy útil:

table .fila td #enlace { ... }

Lo idel sería intentar reducir al máximo esta cadena a la menor cantidad posible de identificadores. A veces es mejor crear un class que no aprovechar la anidación de tags.

Regla 1: hay que intentar reducir la complejidad de los identificadores y evitar descendientes

Una vez se tienen claras estas cosas, también hay que tener presente otro detalle: cuanto más concreto sea un cambio en el CSS, mejor. Esto significa que hemos de intentar evitar tocar los identificadores universales ya que hacen cambiar todos los elementos, lo que implica una ralentización.

[hidden="true"] { ... }

Regla 2: hay que evitar cambiar los identificadores universales
Otra cosa importante a recordar es que los ID son elementos únicos por página, lo que significa que no tiene sentido que aparezcan al final de una serie de identificadores. Para poner un ejemplo:

table .fila td #enlace { ... }

sería lo mismo que esto:

#enlace { ... }

ya que sólo puede haber un #enlace por página…

Regla 3: los identificadores ID no han de tener padres en los CSS ya que son elementos únicos

Otra cosa a tener en cuenta es la nomenclatura de los identificadores. Normalmente las class e ID se utilizan para dar formato a la página, y esto podría llevarnos a utilizar palabras como “rojo” o “azul” cuando realmente queremos decir “alerta” o “información”. Si en un futuro se decide que una alerta no es de color rojo sino naranja, podría llevar a confusión a la hora de rediseñar el sitio.

Regla 4: los identificadores deben tener nombres semánticos y flexibles

A parte de estas recomendaciones, hay otras tantas que pueden ser de utilidad, y que son las que normalmente revisan los sistemas de compresión de CSS, como por ejemplo CSS compressor. Eliminar espacios innecesarios, reducir los colores web, ordenar los elementos…

Regla 5: reducir el tamaño de los CSS hace que se carguen y apliquen antes
En fin… unos simples consejos a tener en cuenta cuando se crean CSS desde cero o vamos a revisar algunos que ya hayamos hecho anteriormente.