- From: Matthew Dean via GitHub <sysbot+gh@w3.org>
- Date: Thu, 15 Aug 2019 02:20:17 +0000
- To: public-css-archive@w3.org
I feel like this is extremely clunky:
```html
<link rel="stylesheet" href="all.css" namespace="#buttons:buttons #links:links #call-to-action:marketing">
<aside marketing:class="cta">
<a href="signup.html" buttons:class="button" links:class="link"> Sign Up! </a> <!-- matches the selector defined in call-to-action.css -->
</aside>
```
I mean, not only does the namespace prop get hairy, but the xml-style namespacing is extremely limited, and this form doesn't allow multiple inheritance. It also clashes with xml namespacing, does it not? Regardless, I think something like [Rich Harris's suggestion](https://twitter.com/Rich_Harris/status/1161280941500837888) is much more palatable.
e.g.
```html
<style>
@scope foo {
p {
font-family: 'Comic Sans MS';
}
}
</style>
<div css="foo">
<p>Paragraph with scoped styles</p>
</div>
```
The reason why this is hugely powerful is because you could extend it in a media-query-like fashion, which namespacing doesn't provide any flexibility for. I might also change the HTML attribute. As in:
```html
<style>
@scope foo {
p {
font-family: 'Comic Sans MS';
}
}
@scope bar {
p {
color: red;
}
}
</style>
<div scope="only (foo, bar)">
<p>Paragraph with foo and bar styles only</p>
</div>
<div scope="all and (foo, bar)">
<p>Paragraph including global p and foo and bar styles</p>
</div>
```
--
GitHub Notification of comment by matthew-dean
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4061#issuecomment-521489219 using your GitHub account
Received on Thursday, 15 August 2019 02:20:19 UTC