BEM规范：如何复用类名且避免命名冲突？

问题解答 #

1. 复用类名同时避免命名冲突的实用技巧 #

你可以根据自己的技术栈选对应方案：

• 原生CSS开发场景：给通用块加修饰符类，比如父级是cool块的场景下用affirmation affirmation--cool，父级是awesome块的场景下用affirmation affirmation--awesome，通用样式统一写在.affirmation选择器下，差异化样式分别写在.affirmation--cool和.affirmation--awesome的选择器下即可，完全不会出现命名冲突。
• 框架开发场景：直接用框架自带的作用域隔离能力，比如Vue的<style scoped>、React的CSS Modules、CSS-in-JS方案，编译后会自动给类名加唯一标识，哪怕全局有重名类也不会互相影响。
• 大型项目通用方案：给所有可复用的组件类加统一前缀，比如c-affirmation（c代指component），和业务自定义类做区隔，从根源降低冲突概率。

2. 上述技巧是否合理？是否符合BEM规范？ #

完全合理，而且是BEM规范推荐的标准用法。BEM的设计核心就是支持块的独立复用，通过修饰符来适配不同场景的差异化需求，你这种跨场景复用通用块的场景正好契合BEM的设计初衷，完全符合规范要求。

3. 直接新建独立类名（比如affirmation-awesome）是不是更优选择？ #

不是最优解。这种写法会导致相同的通用样式需要重复写在多个类名下，后续如果要调整affirmation的通用样式，需要同步修改所有拆分出去的类的代码，维护成本会大幅提升，也违背了样式复用的基本原则。只有当两个块的功能、通用样式已经完全没有共性的时候，才适合拆分出独立的新类名。

针对段落差异化样式的补充说明 #

你不需要特意把段落类名改成父块前缀的格式，用上面提到的修饰符方案就能实现需求：差异化的段落样式直接写在.affirmation--awesome .affirmation__p这类组合选择器下即可，既保留了元素类名的通用性，也能实现不同场景下的样式差异。

内容的提问来源于stack exchange，提问作者user16909741