Especificidad en CSS

La Especificidad Css, básicamente es la importancia que el navegador Web le da a una declaración CSS, para aplicar una propiedad CSS especifica a un elemento HTML.

Veremos esto por pasos para entender mejor esto de la especificidad.

Esta seria una declaración para darle estilos a un elemento div.

div {
	witdh: 100%;
	color: white;
}

Bueno pues resulta que cada vez que utilizamos un selector CSS (div), este selector le otorga ciertos puntos de importancia o especificidad a esta declaración.

Pongo aquí unos ejemplos con los selectores más comunes y el puntaje que otorgan a la especificidad.

div {} => especificidad +1

.Clase {} => especificidad +10

#Id {} => especificidad +100

style="" +1,000.

Tener en cuenta que esta declaración hace referencia a usar un estilo en linea en un elemento en especifico. ejemplo

<div style="color: white" >

!important => +10,000

Podemos encontrar más ejemplos si visitamos la pagina de cssspecificity.com.

Vale, pero de que nos sirve saber la especificidad.

bueno les ha pasado que en un proyecto intentan poner un estilo a un elemento,

.MyClass { color: coral }

, pero jamas logran ver el texto de color "coral", tanto que hacen maravillas y terminan usando

!important

:O.

Este es el resultado de una especificidad muy alta, donde varias declaraciones afectan al mismo elemento.

Pongamos un ejemplo:

Estructura HTML para el ejemplo de especificidad, tenemos un div con la clase container, otro div adentro con la clase title y dentro de este div un h1 con nuestro titulo.

#container {
  color: #ccc;
}

#container #title h1 {
  color: black;
}

#title h1 {
  color: white;
}

#myH1 {
  color: yellow;
}

¿De qué color seria el h1 de nuestro HTML?

Si elegiste Blank estas en lo correcto. Saquemos la especificidad de cada declaración.

#container { color: #ccc; }

Tiene una especificidad de 100.

#container #title h1 { color: black; }

Tiene una especificidad de 201.

#title h1 { color: white; }

Tiene una especificidad de 101.

#myH1 { color: yellow; }

Tiene una especificidad de 100.

Bueno pues la especificidad nos ayuda a saber qué propiedad CSS se va aplicar a un elemento. Pero tener una especificidad muy alta en proyectos más grandes puede hacer que la arquitectura de nuestro CSS se vuelva inconsistente y difícil de mantener.

Aquí un ejemplo de por qué no deberíamos usar

!important

en nuestras declaraciones de CSS.

Requerimiento 1 => Supongamos que estamos trabajando con componentes en react y al inicio del proyecto nos pidieron que realizáramos un componente de imagen y que su titulo sea color amarillo, para no fallar creas un id y le das el color amarillo

#title { color: yellow; }

Requerimiento 2 => Meses después te llega un requerimiento donde este titulo debe ser negro dentro de la pagina de movies, para rápido pones una clase .Page

#title { color: black !important; }

Requerimiento 3 => en otros meses el color del titulo cambia por cada pagina y las hojas de estilo crecen demasiado.

Requerimiento 134 => llega un requerimiento a un compañero de trabajo donde el titulo ahora siempre debe ser color rosa dentro de una sección especifica, tu compañero va a esta sección y declara

.MySeccion #title { color: pink; }

y no funciona debido al

!important

que se declaro en el requerimiento 2.

¿Ahora qué hago? acaso puedo usar un

#Page #MySeccion #title { color: pink !important; }

Claro que puedes, pero justo ese es el problema, la especificidad va aumentando al grado que entre mas crece la aplicación, cada día se vuelve más difícil hacer un cambio tan simple, sin afectar algún otro caso de uso en nuestra aplicación.

Es deber de cada uno usar la especificidad con responsabilidad, entre más plana sea la especificidad de nuestro sitio, será más fácil de mantener y de escalar nuestra arquitectura.

CSS STATS es una herramienta que nos puede ayudar a medir qué tan saludable es la arquitectura de nuestras hojas de estilo.

https://cssstats.com/

Fecha de publicación: 2020-06-07