Reducing CSS selector nesting and making base class names longer

[mayank99]

We have a stylelint rule for limiting selector nesting.

iTwinUI/.stylelintrc.json

Line 10 in df726ca

"max-nesting-depth": 6,

And because of the way we conventionally write css in this repo, we often find ourselves hitting that limit (in header, in sidenav, in slider, and in so many other places).

The other problem we run into is with clashing selectors (e.g. we use the same classes in completely different ways in different components and they end up conflicting).

I think we should start making our selectors flatter by making base classnames (not modifiers) longer where we need to.

---

Inception Rule:

you shouldn’t be too specific or mimicking the DOM at any point. If you find yourself more than four levels deep, that’s a red flag. Of course there are times when you’ll be forced to go there, but it’s not something you should be doing too much.

Other good reads:

• Beware Selector Nesting by Kitty Giraudel on Sitepoint
• CSS tricks style guide by Chris Coyier
• Avoid nested selectors on TheSassWay

[mayank99]

Here's an example of a problem that comes from mimicking DOM structure: iTwin/iTwinUI-react#30 (comment)

We want to wrap a button with span but that breaks button-group styling because of >.

iTwinUI/src/button/button-group.scss

Line 8 in 53065e4

> .iui-button {

[mayank99]

Another example: iTwin/iTwinUI-react#45 (comment)

All because of > and nesting

iTwinUI/src/header/header.scss

Line 34 in 9e66a3f

> .iui-chevron {

[mayank99]

Another one: #123

And another tangentially related one: #125 (comes from too many pseudo-selectors, not nesting)

[mayank99]

another example of the CSS required to achieve a custom hover state

.iui-windows-close:hover,
.iui-windows-close:focus {
  @include themed {
    background-color: t(iui-color-background-negative) !important;
  }
  .iui-icon {
    @include themed {
      fill: t(iui-color-foreground-accessory) !important;
    }
  }
}

without !important:

[maxime4000]

While I agree that limiting nesting has some benefits, I wouldn't impose a lint about it because some component can be complex and nesting help understanding how the component is designed. I would said, be aware that nesting can be bad and try to avoid that, but imposing limit is not helpful.

[bentleyvk]

One of the most popular component lib says to recommends to use longer names and avoid scoping: https://github.com/palantir/blueprint/wiki/Coding-guidelines#css-selectors

[mayank99]

They link to css tips from Mozilla, which has this really good line:

do not let nesting generate CSS rules you wouldn’t type yourself

And look at our generated selector 😄

iTwinUI/lib/css/all.css

Line 683 in d7e09b4

.iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:hover > .iui-icon, .iui-button.iui-active:not(.iui-high-visibility):not(.iui-cta):enabled:active > .iui-icon{