理解 CSS 中的作用域概念
原文英文，约2000词，阅读约需8分钟。
📝
内容提要
CSS中的样式泄漏问题常见，传统命名方法如BEM无法完全解决。@scope at-rule提供了一种新方法，通过定义作用域限制样式应用范围，避免冲突，提升代码可维护性。虽然Firefox暂不支持，但其他主流浏览器已支持，未来将普及。
❓
Q&A
什么是CSS中的@scope at-rule？
@scope at-rule用于定义样式的作用域，限制样式应用于特定的HTML元素，从而避免样式冲突。
@scope如何解决样式泄漏问题？
@scope通过限制样式的应用范围，确保样式只作用于指定的元素，避免影响其他组件。
如何使用@scope同时作用于多个根元素？
可以在@scope中列出多个根元素，如@scope (.mike, .jane) { p { color: grey; } }，这样样式会同时应用于这两个根元素内的p元素。
CSS中的作用域如何影响样式优先级？
作用域优先级基于作用域根元素与目标元素的接近性，越近的作用域优先级越高，解决了传统的样式优先级问题。
目前哪些浏览器支持@scope at-rule？
目前@scope at-rule在Chrome、Safari和Edge等主流浏览器中得到支持，但Firefox尚不支持。
使用@scope可以提高代码的可维护性吗？
是的，@scope可以减少命名冲突和样式泄漏，使代码更易于维护，提升开发者体验。
🏷️
