使用BEM规范时的样式方案选择：直接样式元素还是添加额外类？

嘿，这个问题问到了BEM实践里的常见困惑——其实BEM的核心是模块化、可维护性和样式隔离，所以这两种写法没有绝对的“必须”，而是要看具体的使用场景：

1. 父类直接选择内部元素（无额外类名） #

比如你写的：

.news-section {
  a { color: blue; }
}

这种写法适合非常基础、无独立复用需求、也不会和嵌套模块冲突的内部元素：

• 比如区块里的默认段落、普通链接，这些元素的样式完全依附于父区块，不会在其他地方单独出现；
• 好处是减少冗余类名，代码更简洁。

但要警惕一个坑：如果你的.news-section里嵌套了其他BEM模块（比如一个.card组件），这种写法会意外污染子模块的同名元素。比如.card里的<a>也会被这个样式影响，破坏了BEM的隔离性原则。所以如果区块有嵌套其他模块的可能，这种写法就不太安全。

2. 为元素添加BEM命名类（标准写法） #

比如：

<section class="news-section">
  <a class="news-section__link">link</a>
</section>

.news-section__link {
  color: blue;
}

这是BEM官方推荐的标准实践，尤其适合以下场景：

• 元素有独立的样式需求（比如hover状态、特殊排版、响应式调整）；
• 元素可能被单独复用（比如把这个链接样式用到其他区块）；
• 需要避免样式冲突，尤其是区块嵌套了其他模块的时候，这种写法完全隔离，不会影响外部元素。

另外，这种写法的可读性更强——其他开发者一看.news-section__link就知道这是.news-section区块下的链接元素，维护起来更清晰。

总结一下 #

• 没有绝对的对错，但要根据场景选择：
  • 简单、无复用、无嵌套风险的内部元素，可以用父类直接选择；
  • 复杂、有独立样式、需要隔离或复用的元素，一定要用BEM元素类名。
• 最重要的是团队统一规范——如果你们团队约定所有元素都要加BEM类，那就统一遵守，代码一致性比单一写法的优劣更重要。

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