1) CSS links to HTML based on strings (ids and class names) so we cannot catch typos or automate rename-refactorings, and

2) CSS is not scoped (every rule works on every element).

The lack of scoping aggravates the pain of the string based nature of CSS' coupling.

With the new @scope directive [1], which is now available in all major browser [2] (only FF lacks support), it is possible to scope CSS to a specific element. I expect this could reduce a lot of pain points in working with CSS, and hope to use it for future project.

Is there anyone here who can share their experience using @scope?

[1]: https://www.w3.org/TR/css-cascade-6

[2]: https://caniuse.com/css-cascade-scope

[3]: https://developer.mozilla.org/en-US/docs/Web/CSS/@scope

[4]: https://medium.com/@emperorbrains/mastering-css-a-deep-dive-into-the-power-of-scope-for-enhanced-styling-control-b6ea6a82a6d1