CSS评分组件命名：用BEM区分实心与空心星星

在CSS组件开发中，命名规范常常是理念碰撞的焦点。就拿评分组件里最常见的星星（Star）来说，如何正确运用BEM规范来区分实心和空心状态，是一个典型的“细节见真章”的问题。许多开发者会下意识地使用star--filled和star--empty，但这其实埋下了一个不小的隐患，直接影响后续维护与扩展。

Star 组件的 BEM 命名是否该用 star--filled 和 star--empty？

坦率地说，不推荐。BEM方法论中，修饰符（--modifier）的核心职责是描述组件的「状态或变体」，而不是直接充当视觉样式的翻译官。直接使用star--filled，第一个问题是语义脆弱。今天设计稿要求实心填充，明天可能就变成了半透明渐变，或者用SVG的fill-opacity来控制饱和度。到那时，“filled”这个词还准确吗？更重要的是，这造成了语义与交互的脱节：用户点击后，星星的“已选中”状态，和它“是否被填满”在逻辑上是两码事。

更合理的做法，是回归到行为意图本身来命名，这也是BEM命名的最佳实践之一：

• star--active：表示这颗星被用户主动选中（例如用户评了4星，那么第1到第4颗星都应带有此修饰符）。
• star--hover：表示鼠标悬停路径上的星，这包含了那些尚未被激活但即将被点亮的星，用于预览反馈。
• star--disabled：表示组件整体处于不可操作状态，比如用于只读展示的评分。

这样一来，空心或实心仅仅作为上述状态在CSS层级的视觉表现，通过background-image、mask或SVG的fill属性来实现，完全不需要参与到BEM的命名体系里。这种分离能让CSS组件更健壮。

为什么不能把状态写死在 class 名里，比如 star__icon--full？

这涉及到组件的可扩展性。一个健壮的Star组件，往往需要支持多种渲染方案：可能是SVG symbol引用，可能是字体图标（像Font Awesome），也可能是纯CSS渐变绘制，甚至是canvas动态生成。如果把“full”或“empty”这种具体视觉结果绑定在class名里，后续一旦更换渲染方案，就不得不大规模修改HTML结构或JavaScript逻辑——例如，改用SVG后，star__icon--full这个类名就变得多余且难以处理，因为真正需要控制的是元素的fill属性。

正确的架构思路，是让class名保持行为中立，这也是CSS组件命名的核心原则：

• 结构层固定使用star__icon，它只代表图标这个结构实体。
• 状态层使用star--active这类修饰符，由JavaScript根据用户的评分值动态添加或移除。
• 样式层则在CSS内部，通过属性选择器或修饰符的组合来控制具体样式，例如：
  .star--active .star__icon { fill: #ffc107; }

这种解耦让各层各司其职，维护性和灵活性都大大提升，也符合BEM修饰符的正确使用规范。

如何用 BEM 处理半星（hover 时的过渡效果）？

半星效果本质上是一种连续的视觉反馈，而不是一个独立的离散状态。因此，为它新增一个--half修饰符并非上策。否则，你会面临修饰符的组合爆炸，比如star--active star--hover star--half，维护起来会非常头疼。而且，它很难优雅地处理“鼠标悬停在第3.5颗星的位置，但当前只激活到第3颗星”这种常见交互。

更可靠的实现方案是数据驱动：

• JavaScript监听hover事件，计算精确位置（如3.5），然后为容器元素设置一个属性，例如data-hover-value="3.5"。
• CSS则利用属性选择器来驱动伪元素实现遮罩效果：
  .star[data-hover-value="3.5"] .star__icon::before { width: 50%; }
• 或者，使用CSS自定义属性传递比例值：
  .star { --hover-ratio: 0.5; }，再利用clip-path或mask属性进行视觉截取。

这样做的好处是，BEM的class体系保持了干净和稳定，所有动态的、连续的视觉变化都由数据属性驱动，不会污染核心的命名空间。这也是BEM结合CSS自定义属性的推荐做法。

真实项目里最容易被忽略的兼容点

谈论hover，就不得不提移动端的兼容性问题。在移动端touch事件下，star--hover这个修饰符基本是失效的——iOS Safari默认不会触发:hover状态，而且从touchstart到touchend之间，并没有一个稳定的“悬停”状态。很多团队为了兼容，会生硬地加入star--touched之类的修饰符，结果导致PC端和移动端需要维护两套交互状态逻辑，得不偿失。

一个更普适的建议是：用JavaScript统一管理状态，BEM层只暴露最核心的、代表最终结果的状态，比如star--selected（代表用户提交的评分值）。至于hover、touch过程中的高亮反馈，全部通过添加临时class或直接操作内联style来实现。这样做，可以避免BEM命名规范被各种琐碎的交互细节所“绑架”，同时确保在不同设备上体验一致。

说到底，BEM命名的黄金法则在于：名称只应反映组件在业务中的「角色」和那些稳定的、可控的「状态」。至于设备差异、渲染技术选型、动画阶段或是具体的视觉实现细节，都应该被隔离在命名体系之外。掌握这个原则，你就能写出既易维护又利于SEO的CSS组件。