CSS
July 7, 2025
The term “DOM Blaster” is not official in any way, I just felt like naming it something silly. The idea is that when you use an @scope {}
block inside a <style>
block placed somewhere in the DOM the implied scope is the parent element. This means you can style an element (and it’s descendants) with regular CSS without having to name it or otherwise select it at all. This is immediately useful, but might have bigger implications on how we style sites going forward.
🔗 Links
Example using one-off style block:
https://chriscoyier.net/2025/07/01/coyier-com/
Play with @scope (Comparison demo):
https://developer.chrome.com/docs/css-ui/at-scope
Scope in CSS Blog Post:
https://frontendmasters.com/blog/scope-in-css/
Donut Scope Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/donut-scope/
Proximity Scope Tutorial:
https://frontendmasters.com/tutorials/chris-coyier/proximity-scope/
Latest
Popular