Data Attributes vs BEM - CMS组件定制场景

背景介绍

在CMS界面中，编辑者有时可以自定义组件的渲染方式。比如在Accordion组件中，编辑者可以从下拉菜单中选择展开图标类型。

传统上，我们可能会使用BEM命名规范来处理这些变化，但在CMS定制场景下，data attributes可能是一个更好的选择。

场景1: Accordion图标选择

传统BEM方法

向下箭头向右箭头加号图标

<span class="demo-accordion-item demo-accordion-item--icon-down">Item</span>
<span class="demo-accordion-item demo-accordion-item--icon-right">Item</span>
<span class="demo-accordion-item demo-accordion-item--icon-plus">Item</span>

Data Attributes方法

向下箭头向右箭头加号图标

<span class="demo-accordion-item" data-icon="down-arrow">Item</span>
<span class="demo-accordion-item" data-icon="right-arrow">Item</span>
<span class="demo-accordion-item" data-icon="plus">Item</span>

CSS选择器对比

BEM CSS:

.demo-accordion-item { /* 通用样式 */ }
.demo-accordion-item--icon-down { /* 向下箭头样式 */ }
.demo-accordion-item--icon-right { /* 向右箭头样式 */ }
.demo-accordion-item--icon-plus { /* 加号样式 */ }

Data Attributes CSS:

[data-icon] { /* 通用样式 */ }
[data-icon="down-arrow"] { /* 向下箭头样式 */ }
[data-icon="right-arrow"] { /* 向右箭头样式 */ }
[data-icon="plus"] { /* 加号样式 */ }

交互式演示 - Accordion图标

项目 1 - 向下箭头

项目 2 - 向右箭头

项目 3 - 加号图标

点击上方按钮切换查看Data Attributes方式

项目 1 - 向下箭头

项目 2 - 向右箭头

项目 3 - 加号图标

点击上方按钮切换查看BEM方式

场景2: Badge徽章组件

想象一个列表控制或菜单组件，编辑者可以在项目前后添加文本。这可能是产品名称后的彩色圆圈"NEW"，或者是带数字的红色通知徽章。

CMS配置选项

类型: 颜色: 水平位置: 垂直位置: 文本:

传统BEM方法

<button class="c-txt c-txt--badge c-txt--color-red 
       c-txt--posv-top c-txt--posh-left">
    产品名称
</button>

Data Attributes方法

<button class="product-item" data-text-type="red badge top left" 
       data-text="NEW">
    产品名称
</button>

为什么选择Data Attributes？

后端友好

后端开发者更容易理解和实现，不需要复杂的CSS类名生成逻辑

代码清晰

HTML更简洁，不会有冗长的class列表

灵活性高

支持多个值，可以轻松添加新的修饰符

CMS集成

在CMS系统中更自然地与后端数据模型映射

总结

在CMS组件定制场景下，Data Attributes提供了一个更实用、更易维护的解决方案：

简化后端实现：后端开发者只需输出简单的键值对
提高代码可读性：HTML更简洁，意图更明确
支持复杂组合：一个属性可以包含多个值
渐进式CSS：支持通用样式和特定样式的组合

虽然在某些纯CSS场景下BEM仍然有价值，但在CMS集成场景中，Data Attributes往往是更好的选择。