Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[css-selectors] Why does :is() have the specificity of the most specific selector in its arguments? #3325

Open
ExE-Boss opened this issue Nov 15, 2018 · 5 comments
Labels
selectors-4 Current Work

Comments

@ExE-Boss
Copy link
Contributor

https://drafts.csswg.org/selectors-4/#matches

I believe it would make more sense if the specificity would be identical to that when the selector would be expanded into all possible combinations, which also makes polyfilling using PostCSS easier.

@Loirooriol
Copy link
Contributor

See #1027. The expansion into all possible combinations can grow exponentially, which is bad.

@fantasai
Copy link
Collaborator

The alternative would be taking the specificity of the least-specific selector in its arguments. But yeah, what @Loirooriol said.

@fantasai
Copy link
Collaborator

Closing out, please re-open if there's something to fix.

@fantasai fantasai added the selectors-4 Current Work label Nov 15, 2018
@pygy
Copy link

pygy commented Feb 6, 2020

While exponentially large Cartesian products can be problematic, the current spec also has drawbacks:

  1. It lends itself to priority hacking :is(.foo, a:is(b#cant-match-but#lots-of#dummy#ids)) lets one match only .foo with a very high priority. Not sure if it is a feature or a bug...
  2. it can't be accurately polyfilled
:is(.foo, #bar) {color: red;}
.foo {color: blue;}

gives a red .foo, but a manual expansion to

.foo {color: red;}
#bar {color: red;}
.foo {color: blue;}

gives a blue one. (Expanding to multiple rulesets because :is() is fault tolerant, unlike the plain selector lists).

This can be mitigated per sheet, but if the definitions are in distinct sheets it will bite people.

  1. The way nesting with & is currently implemented in SASS and Postcss also involves Cartesian products. Since & defers to :is() (well, the spec still has :matches() :-) not sure where to file a PR) porting nested sheets to native nesting will be hazardous (beyond the fact that native nesting doesn't support BEM-like &-foo).

If instead you went for a Cartesian product approach, (maybe with an expansion limit for sanity), these three concerns would be addressed.

Edit: also, since SASS has been using the Cartesian products for a decade for its nested selector, and is widely deployed in the real world, I think that this concern about explosion is merely theoretical. You get O(m^n) selectors, but for m and n small enough for this not to matter.

@fantasai fantasai reopened this May 6, 2022
@pygy
Copy link

pygy commented May 6, 2022

Hi @fantasai I thought this was a lost cause... Are there recent developments that made the WG reconsider this point?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
selectors-4 Current Work
Projects
None yet
Development

No branches or pull requests

4 participants