Desde hace ya un tiempo que vengo revisando con frecuencia mi forma de escribir los CSS y comparándolo con las cosas que se comentan en el artículo Writing efficient CSS donde se habla de cómo crear CSS eficientes.
Para empezar, existen 4 tipos de identificadores: ID, class, tags y universales. Cada uno de ellos tienen ciertas particularidades… y se pueden anidar. Así que según vayamos anidando y se vaya haciendo más complejo, la lectura y desarrollo también lo será.
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.
Deja una respuesta