Document recommendation to turn no-descending-specificity off if using a lot of nesting

What steps are needed to reproduce the bug?

I think this isn’t specifically a bug, but the repo doesn’t have a discussion section. The problem I have is that I can’t find a way to sort my scss styles. I constantly get no-descending-specificity and no-duplicate-selectors errors.

.style-custom-scroll {
  &::-webkit-scrollbar-track {
    background-color: 'yellow';
  }

  &::-webkit-scrollbar-thumb {
    &:active {
      background-color: 'red';
    }

    &:hover {
      background-color: 'blue';
    }
  }

  &:active,
  &:hover {
    &::-webkit-scrollbar-track {
      background-color: 'green';
    }
  }
}

This actually output no-descending-specificity error:

• Expected selector “.style-custom-scroll:active” to come before selector no-descending-specificity “.style-custom-scroll::-webkit-scrollbar-thumb:active”

What Stylelint configuration is needed to reproduce the bug?

Dependencies:

"postcss": "^8.4.5",
"postcss-import": "^14.0.2",
"sass": "^1.48.0",
"stylelint": "^14.2.0",
"stylelint-config-sass-guidelines": "^9.0.1",
"stylelint-config-standard": "^24.0.0",
"tailwindcss": "^3.0.14",

Config (package.json):

{
   "extends":[
      "stylelint-config-standard",
      "stylelint-config-sass-guidelines"
   ],
   "rules":{
      "max-nesting-depth":[
         5,
         {
            "ignore":[
               "pseudo-classes"
            ]
         }
      ],
      "no-invalid-position-at-import-rule":[
         true,
         {
            "ignoreAtRules":[
               "use"
            ]
         }
      ],
      "scss/at-rule-no-unknown":[
         true,
         {
            "ignoreAtRules":[
               "tailwind",
               "apply",
               "layer",
               "variants",
               "responsive",
               "screen"
            ]
         }
      ]
   }
}

How did you run Stylelint?

yarn run stylelint ./src/styles/base.scss --fix

Which version of Stylelint are you using?

14.2.0

What did you expect to happen?

I want to remove the errors.

What actually happened?

I get constantly no-descending-specificity and no-duplicate-selectors errors and I cant get out of them.

Does the bug relate to non-standard syntax?

No

Proposal to fix the bug

No response

[lucasvazq]

Hi @jeddy3, thanks for the answer 🥇

The body.style-custom-scroll gives me selector-no-qualifying-type. Right now the problem seems very obvious to me.

I have a class called style-custom-scroll and I expect them have different behaviour if they are applied in a body tag or not. I think the problem here is that doing that is a bad practice. I just need to declare two or three diferent classes.

For example:

• style-scroll (this will have all the basis)
• style-scroll-primary (I will use this for body)
• style-scroll-secondary (I will use this for the rest of the app)

So, as example, this would be the way it would be used:

<div class="style-scroll style-scroll-secondary">

This looks very similar to most css frameworks when you need to stylize a button:

<button class="btn btn-primary">

This is my final result:

.style-scroll {
  &::-webkit-scrollbar {
    height: 0.5rem;
    width: 1rem;
  }

  &::-webkit-scrollbar-thumb {
    background-color: map.get($colors, primary-focus);
    border-radius: 0.25rem;

    &:hover {
      box-shadow: 0 0 0.125rem 1px rgb(0 0 0 / 20%);
    }
  }

  &::-webkit-scrollbar-track {
    border-radius: 0.25rem;
  }

  &.style-scroll-top {
    &::-webkit-scrollbar-thumb {
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
  }

  &.style-scroll-bottom {
    &::-webkit-scrollbar-thumb {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
}

.style-scroll-primary {
  &::-webkit-scrollbar {
    background-color: map.get($colors, secondary);
  }

  &::-webkit-scrollbar-thumb {
    &:hover {
      background-color: map.get($colors, primary);
    }

    &:active {
      background-color: color.scale(map.get($colors, primary-focus), $lightness: 15%);
    }
  }

  &::-webkit-scrollbar-track {
    background-color: map.get($colors, secondary);

    &:active,
    &:hover {
      background-color: color.scale(map.get($colors, secondary), $lightness: 10%);
    }
  }
}

.style-scroll-secondary {
  &::-webkit-scrollbar-thumb {
    &:hover {
      background-color: color.scale(map.get($colors, primary-focus), $lightness: -5%);
    }

    &:active {
      background-color: color.scale(map.get($colors, primary-focus), $lightness: -10%);
    }
  }

  &::-webkit-scrollbar-track {
    background-color: color.scale(map.get($colors, primary), $lightness: 40%);

    &:active,
    &:hover {
      background-color: color.scale(map.get($colors, primary), $lightness: 50%);
    }
  }
}

[jeddy3]

That’s a nice solution.