Re: [csswg-drafts] [css-selectors] Reference selectors (#3714)

I think there's three ideas here and they're worth calling out as distinct concepts.

1) There's a lexically scoped identifier that belongs to the stylesheet and can be used in selectors.
2) There's a way to write selectors in a stylesheet with a specificity of "inline styles".
3) There's a way of getting a collection of declarations from a _single stylesheet_ so that they can be assigned to an element without forcing that element to match a specific html structure.

Reference selectors as specified in this proposal sit at the intersection of these ideas and make them fairly easy to implement, but they also introduce constraints that I feel are surprising and out of step with other selector constructs (namely that there must be a singleton ruleset for each reference). Specifically, I think it's a miss if you can't author something as simple as `$ref:hover` or to provide responsive amendments to `$ref` via media/element queries, which is a major annoyance when working with inline styles.

If we allow lexically scoped reference selectors to participate in the local cascade (with a specificity of "inline styles") then we can assign that identifier to an element through javascript as envisioned above. The rulesets using that selector as the subject selector will then match it with the semantics of having been assigned inline, but more nuanced cascade and document refinements can also occur and the descendants of that element can be targeted through their own reference assignments or through other dom-based selectors.

I think reference selector should have a default specificity of "inline styles" but through proposals like the [`:is()` pseudoclass](https://github.com/w3c/csswg-drafts/issues/1170#issuecomment-329877027), their use in a ruleset could be assigned to have other specificities. Alternatively, we could introduce specific syntax to author a reference class or a reference id. E.g. (`#$foo`, `.$foo`) the values of which could be assigned to the id or classlist of an element through a javascript reference.

With this approach, we can also assign reference selectors to elements through non-javascript means: For example, another selector can be used to apply a reference to elements matching the document query, allowing a form of composition that would still be resolved via the cascade.

To address concept 3 above, I think there's value in being able to ask a single stylesheet to construct a reference based on a "query of the styles". This could preserve some of the interactive aspects like pseudoclasses and media/element queries, while resolving the document structure specific bits. Then this generated reference could be assigned to any element regardless of that element's HTML structural properties. I admit this idea is a little half-baked right now, but I really like the idea of being able to take styles from a single stylesheet and apply it to elements that it wouldn't otherwise match.

Lastly, I think we should give [Sass's placeholder selector a nod](https://sass-lang.com/documentation/style-rules/placeholder-selectors). It's basically a generalized reference selector that can be applied by another selector via `@extend`... I think what I've described here bring reference selectors even closer into alignment with the placeholder selector (Due to implementation constraints, Sass's placeholder selector assumes the specificity of the subject selector that applied it, a CSS-based solution isn't bound by this).




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

Received on Tuesday, 25 June 2019 20:22:59 UTC