Re: [csswg-drafts] [css-cascade-6] Strong vs weak scoping proximity (#6790)

> For example:
> 
> ```css
> @scope (.light-theme) to (.dark-theme) { ... }
> @scope (.dark-theme) to (.light-theme) { ... }
> ```

The problem I have with that approach is that it doesn't scale well. Say a project had around 20 themes and anybody could add a theme by making a pull request with a new `.css` file (an extreme example, I know); then every theme would need a list of all other themes in their lower boundaries and adding a new theme would require adding it to every other theme too.

One way around this that works only when the theme class appears at the end of the class list could be:

```css
@scope (.light-theme) to ([class$="-theme"]) { ... }
```

but that feels like a hack at best. But maybe this is a problem that should be fixed on the selector side (maybe a class suffix/prefix selector?).

---

Either way, I think strong scoping proximity would be very inconsistent with the way CSS currently works:

```html
<style>
   .foo p { color: red; }
   .bar p { color: blue; }
</style>
<div class="bar">
   <div class="foo">
      <p>Blue text</p>
   </div>
</div>
```

As well as solve the same problem that lower scope boundaries already solve.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 21 February 2022 10:42:01 UTC