Usemos (X, X, X, X) para hablar de especificidad.

Estaba charlando con Eric Meyer el otro día y grabé una historia de Eric Meyer de mis años de formación. Escribí una publicación de blog sobre la especificidad de CSS y Eric se tomó el tiempo para señalar su naturaleza engañosa (recuerdo que me apresuré a actualizarla). ¿Qué fue tan engañoso? La forma en que estaba retratando la especificidad como un sistema numérico de base 10.

Digamos que seleccionas un elemento con ul.nav. Insinué en la publicación que la especificidad de ese selector era 0011 (once, esencialmente), que es un número en un sistema de base 10. Entonces estaba diciendo etiquetas = 0, clases = 10, ID = 100 y un atributo de estilo = 1000 . Si la especificidad se calculara en un sistema numérico de base 10 como ese, un selector como ul.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav.nav(11 nombres de clases) tendría una especificidad de 0111, que sería lo mismo que ul#nav.top. Eso no es cierto. La realidad es que sería (0, 0, 11, 1) vs. (0, 1, 0, 1) y este último ganaría fácilmente.

Esa sintaxis separada por comas como la que acabo de usar resuelve dos problemas:

1. No insinúa un sistema numérico de base 10 (ni ningún sistema numérico)
2. Tiene un aspecto distintivo y legible.

Me gusta el look (X, X, X, X). Podría limitarlo a (X, X, X) ya que un atributo de estilo no es exactamente un selector y generalmente no se habla de él en el mismo tipo de conversaciones. Los paréntesis me lo dejan más claro, pero también pude ver una sintaxis XXX (separada por guiones) que no los necesitaría, o una sintaxis (X/X/X) que probablemente se beneficiaría de los paréntesis.

Los selectores de nivel 3 utilizan guiones brevemente. El nivel 2 utilizó guiones y comas en diferentes lugares.

De todos modos, aparentemente me da el error de mencionar esto aproximadamente cada media década.