您应该在使用 BEM 时设置元素样式还是应该添加额外的类答案

【问题标题】：Should you style elements when using BEM or should we add extra classes您应该在使用 BEM 时设置元素样式还是应该添加额外的类
【发布时间】：2018-09-28 18:42:00
【问题描述】：

使用 BEM 时更合适的方法是什么？我们是否允许不向元素添加额外的类并设置元素本身的样式

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


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

}

或者我们是否必须为所有元素添加额外的类并设置这些类的样式？

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

.news-section {
  &_link {
    color: blue;
  }

}

【问题讨论】：

标签： css sass bem

【解决方案1】：

为所有元素添加类，以免将组件的样式与 HTML 结构联系起来。

在您的示例中，您的第一个示例中，new-section__link 必须是一个锚元素，在第二个示例中，它可以是任何类型的更强大和灵活的元素。

【讨论】：

【解决方案2】：

您绝对应该为链接等样式元素添加额外的类。和给按钮header__btn或者图片use-profile__img添加样式的情况一样

添加额外的类从来都不是坏事，它们使代码在未来可扩展。想象一下您想在这个<a> 标签内添加更多元素的情况。你不会像news-section__a__link-header 这样编码吧？

重要提示：您不应该使用 BEM 将元素定位到 2 级以下，因为它是 block__element-modifier，而不是 block__element__element--modifier :)

BEM 解释得很好here

【讨论】：

同意您的回答，但是 toptal 文章是一个不好的例子。这到底是什么class=”header__search-from__input”？我不明白为什么人们会链接到各种来源的示例，而不是创建者的原始网站：en.bem.info/methodology/naming-convention/#naming-rules

【解决方案3】：

是否允许我们不向元素添加额外的类并设置元素本身的样式

没有。

使用 BEM，您必须始终使用 CSS 类：

在 HTML 中，BEM 实体由 class 属性表示。 (bem.info)

作为对这种刚性的回报，BEM 将为您带来：

可扩展性，因为块可以无限制地嵌套；
灵活性，因为 CSS 选择器与 HTML 标记松散耦合。

【讨论】：

【解决方案4】：

要添加到现有答案，是的，除非绝对需要（例如 CMS 所见即所得内容），否则请避免使用特定性来样式项目，因此您的第二个代码会阻止它正确 BEM

但是在您的具体示例中，您设置的只是一种颜色，您可能还有其他想要相同颜色的项目，对吧？

所以我可能为此使用实用程序类更有意义：

<section class="news-section">
  <a class="u-txt-blue">link</a>
  <p class="news-section__title">...</p>
</section>

.news-section {
  ...
  &__title{
     ...
  }
}
//utilities.scss

.u-txt-blue{
    color: blue;
}

【讨论】：