CSS @scope：命名约定和繁重抽象的替代方案

Prescriptive class name conventions are no longer enough to keep CSS maintainable in a world of increasingly complex interfaces. Can the new @scope rule finally give developers the confidence to write CSS that can keep up with modern front ends?

在界面越来越复杂的世界中，规定性的类名约定已不足以保持 CSS 的可维护性。新 @scope 规则能否终于让开发者有信心编写能跟上现代前端的 CSS？

When learning the principles of basic CSS, one is taught to write modular, reusable, and descriptive styles to ensure maintainability. But when developers become involved with real-world applications, it often feels impossible to add UI features without styles leaking into unintended areas.

在学习基本 CSS 原理时，人们被教导编写模块化、可重用且描述性的样式以确保可维护性。但当开发者参与实际应用时，往往感觉不可能在不让样式泄漏到意外区域的情况下添加 UI 功能。

This issue often snowballs into a self-fulfilling loop; styles that are theoretically scoped to one element or class start showing up where they don’t belong. This forces the developer to create even more specific selectors to override the leaked styles, which then accidentally override global styles, and so on.

这个问题往往会滚雪球般发展成一个自我实现的循环；理论上限定在一个元素或类上的样式开始出现在不该出现的地方。这迫使开发者创建更具体的选择器来覆盖泄漏的样式，这些选择器又意外地覆盖了全局样式，依此类推。

Rigid class name conventions, such as BEM, are one theoretical solution to this issue. The BEM (Block, Element, Modifier) methodology is a systematic way of naming CSS classes to ensure reusability and structure within CSS files. Naming conventions like this can reduce cognitive load by leveraging domain language to describe elements and their state, and if implemented correctly, can make styles for large applications easier to maintain.

严格的类名约定，如 BEM，是解决此问题的一种理论解决方案。BEM（Block、Element、Modifier）方法论是一种 系统化的 CSS 类命名方式，以确保 CSS 文件中的可重用性和结构。此类命名约定可以通过利用领域语言来描述元素及其状态 减少认知负担，并且如果正确实施，可以使大型应用程序的样式更容易维护。

In the real world, however, it doesn’t always work out like that. Priorities can change, and with change, implementation becomes inconsistent. Small changes to the HTML structure can require many CSS class name revisions. With highly interactive front-end applications, class names following the BEM pattern can become long and un...