Calculando la especificidad en CSS
Visita este artículo en http://www.estadobeta.com/2006/08/23/calculando-la-especificidad-en-css/
Por Ismael en CSS, artículos, tipsSencilla formula para calcular la especificidad de los selectores CSS
La especificidad en CSS es la importancia que tiene determinado selector sobre otros. Por ejemplo, el selector
a.un-link { color:blue; }
Es más específico que
p a { color:red; }
Sin importar en qué lugar del código se encuentren, el link del ejemplo terminará siendo azul porque las clases CSS tienen más peso -especificidad- que los elementos HTML a secas. Igualmente, las ID (por ej. a#link-especial {color:yellow;}) son más específicas que las clases y elementos.
Pero ¿cómo calculamos con mayor precisión la especifidad de nuestros selectores?
Primero lo primero. Evita usar important!. La palabra important! fuerza un selector a ser más específico que todos los demás en el documento, sin importar la profundidad del selector. El peligro de esto es que, si luego quieres sobreescribir esos estilos para determinado elemento, debes volver a usar important! y tu hoja de estilos se vuelve difícil de mantener.
Segundo, usa la mínima profundidad necesaria para afectar los elementos que quieras. No uses p a.un-link{...} si .un-link{...} es suficiente. Esto te permitirá aumentar la profundidad para elementos específicos más adelante. En este artículo hablo más de esto y otras buenas prácticas.
Dicho todo esto, hay una sencilla fórmula que permite evaluar la especificidad de los selectores, según sean sólo de elementos, de clase o de id.
Un elemento simple (a) tiene un valor de 1. Un selector de clase (.un-link) tiene un valor de 10. Un selector de id (#link-especial) tiene un valor de 100. Los browsers calculan el valor total de un selector sumando estos valores, es decir:
ptiene una especificidad de 1 (1 selector de elemento)p atiene una especificidad de 2 (2 selectores de elemento, 1 + 1 = 2).un-linktiene una especificidad de 10 (1 selector de clase)p a.un-linktiene una especificidad de 12 (2 selectores de elemento + 1 de clase, 1+1+10 = 12)#contenidotiene una especificidad de 100 (1 selector de id)body #contenido a.un-linktiene una especificidad de 112 (1+100+1+10 = 112)
En general un poco de sentido común es suficiente para construir hojas de estilo mantenibles, pero esta simple escala puede ser útil para proyectos más grandes o con varias hojas de estilos.
Fuentes
All That Malarkey tiene un excelente -y divertido- artículo donde compara el poder de los selectores con los personajes de Star Wars (el selector de elemento es un Stormtrooper, el de clase es Darth Vader y el de id, el Emperador). Además tiene una ficha donde las figuras del Lado Oscuro de la Fuerza nos ilustran los detalles de la cascada CSS. Pueden encontrar más información en HTML Dog, en el Blog de Molly y por supuesto en la W3C para los duros de estómago.
- Servicios:
- Comentarios RSS
- Menear!
- Del.icio.us
8/24/2006 at 10:34 am
Como siempre Ismael, bueno, bueno. No tenía idea que los selectores podían tener valores, me imagino que eso hace que finalmente el CSS suba de “peso”?.
En mi caso siempre hago clases específicas cuendo sea necesario, y no me he acostumbrado a trabajar estilos con mucha profundidad.
Eso.
Fuera del tema: detalles del clearfix.
Saludos.
8/24/2006 at 10:40 am
Interesante articulo, como siempre.
Personalmente, no tenido oportunidad de desarrollar un sitio grande, pienso que ahí podria poner a prueba muchas de estas prácticas para ordenarse con la hoja de estilos.
Actualmente he optado por mantener un orden mas comun:
#nombre_id a (hover, etc) {...}; ó
#nombre_id .alguna_clase a (hover, etc) {..};
segun dependiendo…
Saludos cordiales.
8/24/2006 at 4:58 pm
Sebastian, a qué te refieres con que el CSS suba de peso?
Usar aunque sea un grado de profundidad es útil para evitar la redundancia: por ejemplo si tienes un UL con una clase:
no es necesario ponerle una clase a cada LI. Basta con usar la cascada para aplicar estilo a todos los LI dentro del UL:
Qué necesitas saber sobre clearfix?
9/7/2006 at 8:04 am
[…] Calculando la especificidad en CSS Sencilla formula para calcular la especificidad de los selectores CSS (tags: css webstandards tips articulos castellano) […]
6/5/2007 at 5:09 pm
Hola Sebastián,
Esos valores no son peso o memoria específica. Son valores asignados a un elemento. No tiene nada que ver con el tamaño (Kbytes) de un archivo, fichero o documento.
Solo este apunte
Muy bueno el artículo, Ismael. He conocido tu página hoy mismo y comparto tu afición por los estándares, aunque veo que tu ya tienes bastante recorrido
Pero vamos, que Stuff, Clear:left, etc.. son mi pan de cada dia 
Saludos,
Iván
9/5/2007 at 10:20 pm
[…] con tamaño de texto en el body Quizas tengas problemas de especificidad en tu codigo. Aqui tienes una explicacion en español por si no sabes ingles. Otra cosa, sin codigo, no se me […]