Re: [csswg-drafts] [css-nesting-1] & representing parent elements vs parent selector (#8310)

Summarizing some pro/cons of each:

The Current Spec
===========

* Pro: Seems more "CSS-ish", using CSS concepts and the dynamism of the browser more fully
* Pro: Works better for sibling combinators. `.a .b { .c + & {...}}` does what it looks like (matches when the element's previous sibling is `.c`).
* Con: `.a .b { .c & {...}}` matches in more cases, which can be unexpected, and there's no way to enforce "`.c` is an ancestor of the entire parent selector" semantics.
* Con: Until we add some way for pseudo-elements to work in `:is()`, this is fundamentally incompatible with pseudo-elements in the parent selector.

The Sass-ish Proposal
==============

* Pro: Might match author intuition better in cases like `.a .b { .c & {...}}`, where it means ".c is a container around everything I was doing in the parent selector" (rather than just ".c is an ancestor of the selected element, but might be higher, lower, or on the same element as .a").
* Pro: Works automatically with pseudo-elements, tho perhaps in a naive way - `::before { &:hover {...}}` gives `::before:hover`, but there's no way to apply conditions to the originating element (producing a selector like `:hover::before`, or something like `.foo::before`).
* Pro: can regain the current spec's semantics with `:is(&)`.
* Con: Probably matches author intuition *worse* when used with the sibling combinators like in `.a .b { .c + & {...}}`, where it produces `.c + .a .b`. Usages like `.a .b { & + & {...}}` produce the nigh-nonsensical selector `.a .b + .a .b`, a complete departure from what the author appears to be saying in the nested selector (selecting an element when its previous sibling also matches the parent selector). (But as noted in the previous bullet point, `:is(&) + :is(&)` *does* do what's probably intended.)
* Con: depending on implementation, might add an additional multiplicative factor (equal to the number of complex selectors in the selector list) to the internal selector expansion (on top of the existing depth-based multiplication).

--------



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


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

Received on Sunday, 15 January 2023 18:29:32 UTC