Question

使用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;
  }

}

Answer 1

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

没有

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

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

作为对这种僵化的回报，BEM将为您带来：

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

Answer 2

您绝对应该为链接等样式元素添加额外的类。这与向按钮header__btn或图片use-profile__img

添加样式时的情况相同

添加其他类并且将来可以扩展代码永远不会是坏事。想象一下，您希望在此<a>标记内添加更多元素。您不会像news-section__a__link-header那样编码吗？

重要提示：您不应将BEM的元素定位为2级，因为它是block__element-modifier，而不是block__element__element--modifier：）

BEM很好地解释了here

Answer 3

要添加到现有答案，是的，请避免使用特殊性来设置项目样式，除非绝对需要（例如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;
}

Answer 4

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

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

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

4 个答案: