Especificidad CSS

Descubra lo que significa la especificidad de CSS y por qué es importante

¿Qué sucede cuando un elemento está dirigido por varias reglas, con diferentes selectores, que afectan a la misma propiedad?

Por ejemplo, hablemos de este elemento:

<p class="dog-name">Roger</p>

Podemos tener

.dog-name {
  color: yellow;
}

y otra regla que apuntap, que establece el color en otro valor:

p {
  color: red;
}

Y otra regla que apuntap.dog-name. ¿Qué regla prevalecerá sobre las demás y por qué?

Ingrese especificidad.La regla más específica ganará. Si dos o más reglas tienen lamisma especificidad, el que aparece último gana.

A veces, lo que es más específico en la práctica es un poco confuso para los principiantes. Yo diría que también es confuso para los expertos que no miran esas reglas con tanta frecuencia, o simplemente las pasan por alto.

Cómo calcular la especificidad

La especificidad se calcula mediante una convención.

Tenemos 4 ranuras, y cada una de ellas comienza en 0:0 0 0 0. La ranura de la izquierda es la más importante y la de la derecha es la menos importante.

Como funciona para números en el sistema decimal:1 0 0 0es más alto que0 1 0 0.

Slot 1

La primera ranura, la más a la derecha, es la menos importante.

Aumentamos este valor cuando tenemos unselector de tipo. Un tipo es un nombre de etiqueta. Si tiene más de un selector de tipo en la regla, incrementa en consecuencia el valor almacenado en esta ranura.

Ejemplos:

p {
} /* 0 0 0 1 */
span {
} /* 0 0 0 1 */
p span {
} /* 0 0 0 2 */
p > span {
} /* 0 0 0 2 */
div p > span {
} /* 0 0 0 3 */

Slot 2

La segunda ranura se incrementa en 3 cosas:

  • selectores de clases
  • selectores de pseudo-clase
  • selectores de atributos

Cada vez que una regla cumple con una de esas, incrementamos el valor de la segunda columna desde la derecha.

Ejemplos:

.name {
} /* 0 0 1 0 */
.users .name {
} /* 0 0 2 0 */
[href$='.pdf'] {
} /* 0 0 1 0 */
:hover {
} /* 0 0 1 0 */

Por supuesto, los selectores de la ranura 2 se pueden combinar con los selectores de la ranura 1:

div .name {
} /* 0 0 1 1 */
a[href$='.pdf'] {
} /* 0 0 1 1 */
.pictures img:hover {
} /* 0 0 2 1 */

Un buen truco con las clases es que puedes repetir la misma clase y aumentar la especificidad. Por ejemplo:

.name {
} /* 0 0 1 0 */
.name.name {
} /* 0 0 2 0 */
.name.name.name {
} /* 0 0 3 0 */

Slot 3

La ranura 3 contiene lo más importante que puede afectar su especificidad CSS en un archivo CSS: elid.

Cada elemento puede tener unidatributo asignado, y podemos usarlo en nuestra hoja de estilo para apuntar al elemento.

Ejemplos:

#name {
} /* 0 1 0 0 */
.user #name {
} /* 0 1 1 0 */
#name span {
} /* 0 1 0 1 */

Slot 4

La ranura 4 se ve afectada por los estilos en línea. Cualquier estilo en línea tendrá prioridad sobre cualquier regla definida en un archivo CSS externo, o dentro delstyleetiqueta en el encabezado de la página.

Ejemplo:

<p style="color: red">Test</p> /* 1 0 0 0 */

Incluso si alguna otra regla en el CSS define el color, se aplicará esta regla de estilo en línea. Excepto por un caso, si!important is used, which fills the slot 5.

Importancia

La especificidad no importa si una regla termina con!important:

p {
  font-size: 20px !important;
}

Esa regla prevalecerá sobre cualquier regla con más especificidad.

Añadiendo!importanten una regla CSS va a hacer que esa regla sea más importante que cualquier otra regla, de acuerdo con las reglas de especificidad. La única forma en que otra regla puede tener prioridad es tener!importanttambién, y tienen mayor especificidad en los otros espacios menos importantes.

Consejos

En general, debe usar la cantidad de especificidad que necesita, pero no más. De esta manera, puede crear otros selectores para sobrescribir las reglas establecidas por las reglas anteriores sin volverse loco.

!importantes una herramienta muy debatida que nos ofrece CSS. Muchos expertos en CSS se oponen a su uso. Me encuentro usándolo especialmente cuando pruebo algún estilo y una regla CSS tiene tanta especificidad que necesito usar!importantpara que el navegador aplique mi nuevo CSS.

Pero en general,!importantno debería tener lugar en sus archivos CSS.

Utilizando laidEl atributo al estilo CSS también se debate mucho, ya que tiene una especificidad muy alta. Una buena alternativa es usar clases en su lugar, que tienen menos especificidad, por lo que es más fácil trabajar con ellas y son más poderosas (puede tener varias clases para un elemento y una clase se puede reutilizar varias veces).

Herramientas para calcular la especificidad

Puedes usar el sitiohttps://specificity.keegan.st/para realizar el cálculo de especificidad automáticamente.

Es útil especialmente si está tratando de resolver las cosas, ya que puede ser una buena herramienta de retroalimentación.

Descarga mi gratisManual de CSS


Más tutoriales de CSS: