Scoped CSS is Back
March 7, 2024
There are two key things scope brings to CSS:
- More control over which selectors target which elements (i.e. better manipulation of the cascade)
- The ability for one set of styles to override another based on proximity in the DOM
Scoped styles allow you to contain a set of styles within a single component on the page. You can use a .title selector that only works within a Card component, and a separate .title selector that only works in an Accordion. You can stop selectors from one component from targeting elements in a child component — or you can allow them reach in, if that’s what you need.You will not need BEM-style classnames anymore.Furthermore, proximity becomes a first-class citizen in the cascade. If two components target the same element (with the same specificity), the inner component’s styles will override those of the outer component.
Source: Scoped CSS is Back
Scoped CSS is something that excited me when first proposed some years ago–but never saw the light of day in the CSS standard or in browsers. Well, now it’s making a come back, well supported in Chrome since later last year, and in Safari Technical Preview (but not yet Firefox).
It will greatly simplify the challenge of focussing your CSS where you want it to go.
It’s not over the line yet, but things are looking promising.
