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:
* p tiene una especificidad de 1 (1 selector de elemento) * p a tiene una especificidad de 2 (2 selectores de elemento, 1 + 1 = 2) * .un-link tiene una especificidad de 10 (1 selector de clase) * p a.un-link tiene una especificidad de 12 (2 selectores de elemento + 1 de clase, 1+1+10 = 12) * #contenido tiene una especificidad de 100 (1 selector de id) * body #contenido a.un-link tiene 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.
Usuarios que han visto este tema también han visto...
- Estilo en funcion del contexto
- Estilizando formularios
- Aproximación al problema del color: imagen vs CSS
- Decorar un campo select de formulario con CSS
- Aplicacion directa de etiquetas.
- Versión imprimible de este documento
- Enviar por e-mail este documento
Información legal | Política de Privacidad | Contacte con nosotros
Otro proyecto de Factoría de Internet. Copyright© 2003-2008 Factoría de Internet S.L.. Todos los derechos reservados.