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

> I don't see how your proposed syntax avoids namespace collisions, which is a major goal of this proposal.

I see, so you're anticipating a scenario of "class `.foo` from local.css but NOT class `.foo` from global.css"

To be clear, this wasn't originally my proposal, I was just bumping for visibility because of its simplicity. But I think you're pointing out that simplicity could lead to ambiguity. Which may be a fair criticism.

There are two pieces I think are awkward in the original proposal:
1. `namespace="#buttons:buttons #links:links #call-to-action:marketing"` <-- I think that should be inherently disallowed. That is, if a stylesheet opts into namespacing as a `<link>` attribute, it should do so under a single namespace. If a stylesheet has multiple namespaces, they should be within the stylesheet. This would follow semantically with media queries, where one query can be on a `<link>`, or a stylesheet can contain multiple queries (or both).
2. The repetition of attributes like `buttons:class="foo" links:class="foo" call-to-action:class="foo"` I get is utilizing XML namespacing, but I feel this is harder to reason about from the perspective of CSS selectors. That is, CSS can select an ID / class / element / attribute, and of course, this doesn't work to do `buttons:id="foo" links:id="foo" call-to-action:id="foo"` and then you get into weird cases where the browser doesn't know what to do with `buttons:type="text" links:type="text" call-to-action:type="submit"`. So, in other words, this pattern breaks if your CSS contains anything other than classes, such as trying to style all `<p>` tags within a local tree. Your proposal seems to clash with the fundamentals of CSS (and possibly the DOM?).

Instead, what seems more logical to me is for elements to opt into a particular scope (or multiple scopes) or namespace(s). And the nice thing about Rich's scoping proposal is that you don't have to add verbose namespace attributes on every single element all the way down your tree, which I think would be a non-starter for many devs.

As far as namespace collision, there would probably be a simple way to target those scopes to a particular selector, such as in-place aliasing, like:

```html
<button class="btn" scope="foo(.button as .btn)">
```
Alternatively, it that proved to be clunky, there could be some kind of aliasing in a style-sheet / style block, where a namespace would be referenced and exported as another namespace (which would probably be cleaner.

Either way, that seems more flexible / workable than XML namespacing just because of how people are used to working with CSS. We can't assume / force that people would only work with classes, and not IDs, element names, or attribute selectors when scoping their styles.

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

Received on Monday, 26 August 2019 19:56:32 UTC