Una forma inesperada de aumentar la prioridad de un selector CSS

 (cirrus.twiddles.com)
22 puntos por ragus 2024-10-04 | 7 comentarios | Compartir por WhatsApp

Problema

  • Al dar estilo con CSS, a veces ocurren conflictos y se termina aplicando un estilo no deseado.
  • Estos conflictos suelen deberse a bibliotecas de UI, widgets de terceros o código CSS administrado por otros equipos, y en esos casos muchas veces no se puede modificar el CSS libremente.
  • En particular, cuando hay conflictos con CSS proveniente de una biblioteca de UI o de terceros, también puede ser difícil agregar clases o IDs adicionales al HTML.
  • Además, si el código CSS que causa el conflicto está escrito de forma muy específica, puede que ni siquiera sea posible hacerlo más específico para aumentar la prioridad de mi CSS.
  • En este punto muchos desarrolladores recurren fácilmente a !important, pero no es una práctica recomendada.

Solución

  • Basta con repetir el selector.
  • Por ejemplo, .checkbox__icon.checkbox__icon tiene mayor prioridad que un solo .checkbox__icon.
  • Aunque este método pueda parecer un hack de CSS, en la especificación de CSS Selectors Level 4 se indica explícitamente: "Repeated occurrences of the same simple selector are allowed and do increase specificity.(Se permiten las apariciones repetidas del mismo selector simple y sí aumentan la especificidad.)".

Lecturas relacionadas

7 comentarios

 
kroisse 2024-10-07

Ahora que CSS Cascade Layers (@layer) ya es compatible con todos los navegadores principales, parece que ya no será necesario depender de este tipo de hacks.

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
 
gwpark 2024-10-06

Oh, entonces así es como se sobrescribe el estilo usando && en styled-components, ¿no?
 
dogtree 2024-10-05

Baja el post, estudiante.
 
kyc1682 2024-10-05

Se siente como magia negra jajaja
 
xenoside 2024-10-04

Ahora veremos código como este.
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
 
nemorize 2024-10-04

Oh, no sabía esto...
Dependiendo del caso, quizá incluso se podría crear y usar un preprocesador que repita el selector varias veces.
 
spilist2 2024-10-04

Oh, no conocía ese método.