I am trying to reduce CSS specificity in my project by using the stylelint selector-max-specificity and I have now set it to "0.2.0". The problem is that when I use wonderful-input::placeholder it doesn't throw me an error, even if it has 0,0,1 specificity, but when I use wonderful-input:focus::placeholder the specificity is increased to 0,1,1 and an error is thrown. The error that I get ofc is:
Expected ".input-basic__input--active:focus::placeholder" to have a specificity no more than "0,2,0" (selector-max-specificity)Stylelint(selector-max-specificity)
Does anyone know why I get the error and if I can decrease the specificity on this one?
I just don't understand why 0,0,1 doesn't and 0,1,1 does throw me an error! Thanks :D
Does anyone know why I get the error
Using this calculator you can see that the selector .input-basic__input--active:focus::placeholder has a specificity of 0,2,1, i.e. 2 (pseudo-)classes and 1 (pseudo-)element.
0,2,1 is greater than chosen max specificity of 0,2,0, and the rule correctly reports this.
You should increase your primary option to 0,2,1 if you want to use this selector.
the problem is that when I use
wonderful-input::placeholderit doesn't throw me an error
The selector wonderful-input::placeholder has a specificity of 0,0,2, i.e. 2 (pseudo-)elements, which is lower than 0,2,0 so the rule allows it.
can I decrease the specificity on this one?
There is no way to decrease the specificity of the .input-basic__input--active:focus::placeholder selector and have it do the same thing: i.e. style the placeholder pseudo-element of focused elements that have the class input-basic__input--active.
I am trying to reduce CSS specificity in my project by using the stylelint selector-max-specificity
It's an admirable goal. You can also use the other selector-max-* rules, like selector-max-class, selector-max-combinators, selector-max-compound-selectors and so on, to help you do this.