:where() considered useful

I always have fun with specificity, especially when I have to say it out loud. As good CSS wizards, we don’t worry about that, of course, we feel it when we look at the code. Nevertheless, there are actually cases where the weight of selectors is so difficult to plan that we would rather do without them altogether. Enter: where() (MDN, CanIUse). The handy little pseudo-selector, which is primarily intended to simplify the writing of selector chains, also ensures that the specificity of the bracket expression is set to (0, 0, 0), i.e. zero, nothing… this is very useful if, for example, we want to give a component some basic styles, but also do not want to exclude the possibility of overwriting these styles.

.base-text { /* specificity (0, 1, 0) */ 
    font-weight: 400; 
}

:where(.base-text){ /* specificity (0, 0, 0) ! */ 
    font-weight: 400; 
}