La guía para principiantes sobre la especificidad de CSS

¿Alguna vez ha tratado de anular una regla CSS, solo para descubrir que no funciona como debería? ¿O notó que cuando un elemento se orienta varias veces con diferentes combinaciones de selectores de CSS, solo se aplica una regla a la vez? Todo esto se debe a las reglas de especificidad de CSS.

Las reglas de especificidad de CSS pueden ser uno de los conceptos más confusos de entender, especialmente para los principiantes.

Si recién está comenzando con CSS, como regla de orden estándar, podría pensar que la última regla de CSS debería anular la anterior. Parece simple, pero no siempre funciona así. Depende de la especificidad de CSS, cuándo y qué regla de CSS se debe aplicar.

Entonces, analicemos qué es la especificidad de CSS y cómo usarla de manera eficiente.

¿Qué es la especificidad en CSS?

En palabras simples, si tiene varios selectores de CSS para un elemento, se aplicará el que tenga el valor específico más alto.

Los diferentes selectores tienen diferentes pesos y el navegador decidirá cuál es el más relevante para ese elemento.

¿Como funciona?

La especificidad de un selector se puede categorizar en los siguientes cuatro niveles:

1. Estilo en línea o CSS
2. identificaciones
3. Clases, pseudoclases y atributos
4. Elementos o pseudo-elementos

Los estilos en línea o CSS , donde CSS se aplica directamente en el documento HTML, tienen este aspecto <p> . Los estilos en línea siempre tendrán el nivel de especificidad más alto.

En segundo lugar en este orden están los ID , como #content . Entonces, cualquier selector que use una ID tendrá el segundo nivel de especificidad más alto.

Las clases , las pseudoclases y los atributos ocupan el tercer lugar en este orden. Se ven como: .post , :hover y [title] , respectivamente.

Los elementos y pseudo-elementos tienen el menor valor. li y :after son ejemplos básicos de un elemento y pseudo-elemento.

El cálculo

El valor de especificidad se puede calcular con la siguiente pauta:

• Estilo en línea o css: 1,0,0,0
• Identificación: 0,1,0,0
• Clase o pseudoclase y atributo: 0,0,1,0
• Elementos y pseudo-elementos: 0,0,0,1
• Selector universal(*): 0

Para comprobar el nivel de especificidad de su selector, puede utilizar la calculadora de especificidad.

Reglas básicas de especificidad CSS

Ahora que tiene una idea de cómo se organiza la especificidad, analicemos algunas reglas generales y ejemplos.

Este es el HTML base que usaré en mis ejemplos. Aquí tengo una pequeña lista dentro de un contenedor con #content .

 [css] <div id="content"> <ul class="list"> <li>Item 1<li> <li>Item 2</li> <li>Item 3</li> </ul> </div> [/css]

Regla 1

Si tiene dos o más selectores iguales para un elemento, todos tendrán el mismo valor de especificidad, por lo tanto, se aplicará el más bajo o el último.

En el siguiente fragmento de CSS, ambos selectores tienen la misma especificidad, por lo que el color li será amarillo, ya que se coloca más abajo en la línea.

 [css] ul li{ color: green; } ul li{ color: yellow; } [/css]

Regla 2

Si se utilizan varios selectores para un elemento, se aplicará el selector con el valor específico más alto.

En el siguiente ejemplo, li está dirigido por dos selectores diferentes y ambos afectan el color de la fuente. Entonces, ¿qué regla debería aplicarse?

Al igual que la instancia anterior, en el concepto de orden de CSS se debe aplicar el segundo (por lo que el color li sería verde) pero debido a que .list li tiene un valor de especificidad más alto que ul li , el color permanecerá rojo.

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

regla 3

Vimos que la clase supera a los elementos en el nivel de especificidad, ahora veamos qué sucede con una identificación.

En el siguiente ejemplo, tenemos una clase y un ID que tienen como objetivo el mismo elemento y afectan el color de la fuente. De nuevo la misma pregunta: ¿qué regla debería aplicarse?

 [css] .list li{ color: red; } ul li{ color: green; } [/css]

Como se mencionó anteriormente, la identificación tiene un valor de especificidad más alto que la clase, los atributos y los elementos, por lo que el color será azul. Siempre diríjase a la ID para un mayor nivel de especificidad.

Regla 4

!important anulará cualquier selector de cualquier valor de especificidad. Pero tenga en cuenta que !important no debe abusarse porque no se considera una buena práctica de CSS.

Si usted es el autor de su CSS y no anula una regla existente, no necesitaría usar !important .

Utilice !important solo cuando intente anular el CSS de otra persona y su especificidad no pueda superar al selector anterior, especialmente cuando no pueda controlar el orden de colocación de su CSS en el HTML.

Esto sucederá principalmente mientras trabaja en WordPress, donde encontrará muchos archivos CSS ya agregados por diferentes complementos y temas.

En general, el complemento CSS es específico para el complemento y usa ID, inline-css o incluso !important para una mayor especificidad, para evitar cualquier conflicto de CSS. Para anular ese CSS, debe usar una especificidad aún mayor; para estos escenarios puede usar !important .

En el siguiente ejemplo, estoy recreando los escenarios anteriores, con li apuntado con diferentes selectores de CSS, pero puede ver que !important anula todas las reglas y el color será amarillo.

 [css] #content li{ color: blue; } .list li{ color: red; } ul li{ color: green; } ul li{ color: yellow !important; } [/css]

!important le dará el poder de hacer cumplir su CSS por encima de cualquier nivel de especificidad.

Debe tener cuidado al usar !important porque no puede anular esta regla. La única forma de anular un !important es usar otro !important más adelante en el CSS, por lo que su CSS puede verse desordenado fácilmente si no comprende su poder.

algunas excepciones

Los elementos y pseudoelementos tienen la menor especificidad, pero hay algunas excepciones interesantes (¡y un poco confusas!). (Confuso porque no parecen seguir las reglas que acabamos de ver).

En este ejemplo, verá :first-child (pseudoclase) y :first-line (pseudoelemento). Acabamos de aprender que las pseudoclases tendrán una mayor especificidad que los pseudoelementos, por lo que, de acuerdo con eso, el color de la primera línea del párrafo debe ser verde, pero en su lugar será rosa.

 [css] p:first-child{ color: green; } p::first-line{ color :pink ; } [/css]

Puede pensar que el orden sería un problema aquí, pero incluso cambiar el orden no cambiará la salida. La calculadora de especificidad muestra una imagen diferente al resultado.

Aquí es donde la especificidad se vuelve un poco confusa. Solo puedo suponer que la razón de este resultado es :first-line está más cerca del elemento y probablemente se trate como estilo en línea. Puede consultar jsfiddle para ver otro ejemplo.

¿Cómo usar la especificidad de manera eficiente?

Si comprende las reglas de especificidad de CSS, puede usarlas de manera muy eficiente y hacer que su CSS sea reutilizable.

Digamos que desea usar el mismo .button pero con diferentes colores de fondo, por lo que configura un selector específico: .red-block .button .

 [css] .button{ background: #97bc2d; font-size: 1em; display: inline-block; } .button a{ display: block; color: #fff; padding: 1em 2em; text-decoration: none; } .red-block .button{ background: red; } [/css]

Si .button está envuelto en un contenedor .red-block , el color de fondo predeterminado del botón cambiará a rojo.

La especificidad de CSS es muy útil cuando se personalizan temas de WordPress, donde se intenta anular el CSS del autor del tema con el suyo propio.

Errores comunes a evitar

Algunas personas usan selectores ultraespecíficos, lo cual no es una buena práctica. Sea tan específico como sea necesario solamente. Por ejemplo, este fragmento de código apunta a li pero es demasiado específico.

 [css] div#content ul.list li{ color: purple; } [/css]

Si es demasiado específico con su CSS, se volverá rígido y más difícil de reutilizar. Podría escribir fácilmente .list li en lugar de div#content ul.list li , lo que hará que su CSS sea más limpio.

Recursos adicionales

• W3 org sobre especificidad
• Calculadora de especificidad CSS
• Error de IE
• es decir, hackear

Conclusión

Como puede ver, la especificidad de CSS es una herramienta importante y todo desarrollador front-end debería tenerla en su caja de herramientas. Una comprensión clara de este concepto puede contribuir en gran medida a convertirlo en un buen desarrollador front-end.