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

To summarize the net effect of this proposal, as I understand it:

When you import a stylesheet into your project (via `<link>` or `@import), you declare a prefix that is implicitly appended to all class or ID selectors in that stylesheet, and maybe other stylesheet identifiers.

This way, you can safely use third-party CSS (or styled components created by different devs within the same large organization) without conflicts, because as the author of the final, composed document, you chooses the prefix and uses it for classes and IDs.  You can also override or extend rules from the imported stylesheets by using the prefix in you own selectors.

Pros:

- Fairly simple & similar to CSS class-naming conventions that append a component-name prefix to all classes inside the component.

- Easy to polyfill by cycling through the rules in the imported stylesheets and modifying their selectors to insert the prefix.

Cons:

- As currently proposed, you would get incorrect styles in unsupporting browsers (or as a flash until a polyfill runs) when using the `<link>` syntax.  The selectors in the imported stylesheet (`.some-class`) wouldn't apply to the intended elements (`.scope|some-class`), but they could apply to _other_ elements.  This could be solved by defining a new `rel` type: `<link rel="scoped-stylesheet">` or something similar, which would prevent the linked file from behaving as a stylesheet at all unless the scoping proposal is supported (natively or via polyfill).  The `@import` syntax should already have the same effect, as any unrecognized tokens in that rule _should_ make it invalid.

- It _only_ addresses scoping for class and id selectors, not for tag name or attribute selectors.  If we lived in a world where XML namespacing was standard for custom tag & attribute names, I'd suggest integrating the two, so the declared prefix also gets linked to the default `@namespace` of the imported stylesheet.  Maybe that's still a good suggestion!  But in a world where custom elements are defined by dasherized names that have no special syntax considerations in CSS, things get more complicated.

- It could be very confusing to have two ways of declaring namespace prefixes which affect different selector parts (this proposal for classes & IDs, and XML namespace prefixes for tags and attributes). That said, if CSS is going to have both, with a clear separation to where they apply, reusing the `prefix|selector` syntax does make sense.

As I mentioned on Twitter, if this scoping mechanism is going to apply to CSS identifiers, it should be integrated with a scoping mechanism for referencing identifiers from shadow trees, as discussed in #1995.

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

Received on Wednesday, 26 June 2019 22:49:45 UTC