Especificidad en CSS

La especificidad en CSS determina qué regla se aplica cuando varias afectan al mismo elemento. Es fundamental para entender y evitar conflictos en los estilos.

Conceptos básicos

La especificidad es un valor numérico que el navegador usa para ponderar las reglas. Los elementos, clases e identificadores tienen diferentes puntuaciones.

Este ejemplo muestra cómo se aplican las reglas de elemento, clase e identificador.

Sistema de puntuación

Los valores de especificidad se componen de categorías: estilos en línea, ID, clases y elementos. Cuanto mayor sea la puntuación, más fuerte es la regla.

Selector	Valor de especificidad
Element selector (p, div)	0-0-1
Class selector (.class)	0-1-0
ID selector (#id)	1-0-0
Inline style	1-0-0-0 (highest)

Uso de !important

La declaración !important sobrescribe toda especificidad, por lo que debe usarse con cuidado. Utilízala solo si no hay otra solución.

Consejos sobre especificidad

Gestionar la especificidad ayuda a mantener el código limpio y evitar problemas de estilos. Aquí algunos consejos prácticos:

Evita los selectores con demasiada especificidad para que sea más fácil sobrescribir reglas.
Organiza lógicamente y utiliza clases en lugar de IDs siempre que sea posible.
Minimiza el uso de !important para evitar conflictos difíciles de mantener.