Re: [csswg-drafts] [css-nesting] Problems with indiscriminately wrapping all parent selectors with `:is()` (#9492)

@FremyCompany Indeed. And while `article, .article` isn't realistic, things like `button, .btn` are *super* common.

A particularly egregious (and yet realistic) example:

file1.css
```css
button.primary {
 background: var(--color-accent);
 color: white;
}
```

file2.css
```css
button, a.button {
 background: #eee;
}
```

`<button class="primary">` ends up having white text and a light gray background…

The root problem goes way beyond shifting up declarations in nesting or matching pseudo-elements. The way nesting currently works breaks the fundamental assumption that just adding something at the end of a selector list does not affect existing matching.

And what if we just want to one-off style certain elements as buttons without adding `class="button"` to them?

```css
button, a.button, #nav > li > a {
 background: #eee;
}
```

Good luck getting *any* other background on your buttons now!

So I don't think the solution I proposed in the first post would actually work, nor would `@nest`, since the problem is just as frequently author-triggered. We need to fix the root issue here. 

As @emilio mentioned in the call, a first avenue is to dig up and re-examine the reasons why we couldn't do dynamic specificity on `:is()`. 

If that is not workable, maybe explore better rewriting algorithms that avoid combinatorial explosion without flattening specificity. @tabatkins mentioned the following example:

```css
#a, .a, a {
 #b, .b, b {
  #c, .c, c {
  }
 }
}
```

With naïve rewriting, that would produce 3^3 = 27 selectors. In the general case of N selectors per list and M levels nesting, we have N^M selectors, hence the exponential combinatorial explosion that is mentioned.

However, in terms of specificity, there are only 9 different specificities (not 27 as was mentioned in the call):
- 3, 0, 0
- 2, 1, 0
- 2, 0, 1
- 1, 2, 0
- 1, 1, 1
- 0, 3, 0
- 0, 2, 1
- 0, 1, 2
- 0, 0, 3

In the general case, even in the worst case where every one of the N items in the selector list has a different specificity, the number of distinct specificities of the combination is N * M, i.e. not exponential (and close to linear, since M is usually relatively small).

-- 
GitHub Notification of comment by LeaVerou
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/9492#issuecomment-1779758880 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 25 October 2023 17:42:46 UTC