W3C home > Mailing lists > Public > public-css-archive@w3.org > March 2019

Re: [csswg-drafts] [css-scoping] Please bring back scoped styles (#3547)

From: Benoît Rouleau via GitHub <sysbot+gh@w3.org>
Date: Tue, 12 Mar 2019 20:00:46 +0000
To: public-css-archive@w3.org
Message-ID: <issue_comment.created-472158643-1552420845-sysbot+gh@w3.org>
> When scope was in the spec, it was defined such that inner scopes overrode outer scopes, regardless of selector specificity.

I (a web developer) would absolutely love to see this implemented, for this exact reason. It would finally allow us to easily and elegantly override styles for new modules in existing projects with huge, potentially messy stylesheets full of overly specific selectors. With the `@scope` approach proposed above, we would be able to do something like:

```
/* messy stylesheet rules here... */

@scope .new-module {
    * {
        /* optional, prevents outside styles from leaking in */
        all: revert;
    }

    .new-module-box {
        font-size: 18px;
        color: blue;
    }
}
```

Regardless of whether `all: revert` is used or not, there would be no risk that the styles defined in `.new-module-box` will be overridden by any of the existing stylesheet rules even though the selector has very low specificity, because we're in a new scope.

This allows new code to be clean and easy to understand (even if the foundation is messy), rather than filled with `!important` declarations or multiple ID selectors only meant to boost the specificity.

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/3547#issuecomment-472158643 using your GitHub account
Received on Tuesday, 12 March 2019 20:00:47 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:45 UTC