CSS
July 1, 2025
Proximity scope is a feature of @scope
in CSS. While resolving a selector within an @scope () {}
at-rule, selectors with the same specificity will rely on DOM proximity to decide a winner above what would have otherwise been source order. This is a whole new step in the cascade for CSS. It’s a bit niche of a concern, but it actually can make CSS work more intuitively, fixing an issue where an obviously closer class is losing to another class just because of the order they appear in the CSS.
🔗 Links
Proximity Scope Basic Demo:
https://codepen.io/editor/chriscoyier/pen/ZYGdBje
Limit the reach of your selectors (blog post):
https://developer.chrome.com/docs/css-ui/at-scope
Scope in CSS Blog Post:
https://frontendmasters.com/blog/scope-in-css/
Nicole Sullivan’s Blog Post:
https://www.stubbornella.org/2011/10/08/scope-donuts/
Donut Scope Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/donut-scope/
DOM Blasters Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/dom-blasters/
Latest
Popular