Stylelint: disable certain rules? Issue with no-descending-specificity

eslint

#1

Hello.

Is it possible to disable certain eslint rules?
Wasn’t able to find anything specific inside resources/assets/build/ that might help with this.

For example, I’m having many issues with this specific rule: ‘no-descending-specificity’; it throws errors like:

Expected selector ".card.card-simple:hover .card-footer button" to come before selector ".img-split .img-split-el .img-split-cont:hover      no-descending-specificity
           .img-split-btn button"

This prevents me from continuing my work or just forces me to do things very differently which is not alway good. Any ideas about how to get around this rule, that I believe is a bit broken?

Thanks!


#2

Solved it by setting this rule to null in package.json:

"rules": {
      "no-descending-specificity": null,

If anyone has a solution for why the rule is triggered, would be better to leave it turned on of course :slight_smile:


#3

It’s being inherited by the preset.


#4

I believe that rule is being triggered because you’re putting a less specific selector after a more specific one:

/** specificity of 0,0,5,1 */
.img-split .img-split-el .img-split-cont:hover .img-split-btn button { ... }

/** specificity of 0,0,4,1 */
.card.card-simple:hover .card-footer button { ... }

Both of these selectors target button, but the first one has higher specifity. Generally, you should structure your CSS so that it starts with lower specificity and moves to higher: Your arrangement inverts that, which is what Stylelint is complaining about.

Switching their order is the simplest fix, but if you replace the final item (currently button in both cases) with a selector that differs, that should also work. i.e.:

.img-split .img-split-el .img-split-cont:hover .img-split-btn .image-button { ... }
.card.card-simple:hover .card-footer .card-button { ... }

#5

:sweat_smile: I most definitely misread the question. Nice explanation @alwaysblank!


#6

Shouldn’t this apply only to same parent elements? Why should specifity matter if the parent is different? Otherwise, your solution works indeed yeah. But am still confused as to why this throws the error here since the parent selector is different and we’r targeting a totally different thing at the end.


#7

From an HTML perspective, yes, you are targeting different elements, but from a CSS perspective you aren’t: both selectors target a button. The way CSS works and the way those selectors are written, both of them could target the same element–you just happen to know they don’t because you wrote the HTML. This is exactly the kind of ambiguity CSS specificity is intended to resolve. It’s also why I usually try to write CSS selectors that are as simplistic as possible: ideally only 1 to 2 elements per selector.


#8

Writing BEM helps eliminate seeing this. But I know BEM’s divisive.