Re: [csswg-drafts] [css-selectors][css-namespaces] Lexical Scoping (#4061)

Isn't what many seem to want just a type of CSS variables containing lists of declarations? Then they could be applied to any elements (or targets identifiable with selectors in general) without touching the markup. (Of course in the common case of components there would be, and often already is, a direct markup based way to select them. I'll assume `class="my-component"` here.) Example:
`<head>
<title>Example</title>
<style>
@scope my-typography { /* Since it's more general, the at-rule could be named differently. */
    font-family: my-brand;
/* Some stuff from [css-nesting] would be very useful here. */
}
/* The above part could be in a different resource. */
.my-component {
    include-scope: my-typography;
    exclude-scope: x y;
}
</style>
<body>
<div class="my-component"/>
</body>`
Both `include-scope` and `exclude-scope` take lists of scopes (variables). They could be extended with features considered above (`only()`, `all` as a special name, logical connectives). Styles are attached to a root with `include-scope` and blocked (from some root or the global scope with `all`, that pertains to inherited properties and those set on descendants with [css-nesting]) with `exclude-scope`. (If a name occurs in computed values of both on the same target, it's as if it wasn't there for styling purposes. Only descendants can re-enable.) This solves (as far as I understand it) the lower boundary issue.

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

Received on Thursday, 13 February 2020 17:46:27 UTC