CSS BEM - 常见的约定 class

Question

我正在尝试使用 BEM 约定重构我们的样式。在我们的页面上，我们得到了一些写为 bold 的元素。

假设我们有一个 startpage 和一个 detailpage。两个页面都包含一些文本元素。通常这个元素有一个额外的 class，它只包含

.block__element {
  font-weight: bold;
}

.block__element--modifier {
  font-weight: bold;
}

为了避免不必要的代码重复，我在问自己如何最好地重构它。定义一个公共元素是不是一种好方法（也许在我的主要style.css）

.text--bold {
  font-weight: bold;
}

我可以在所有需要将文本设置为粗体的地方使用它？或者有更好的解决方案吗？

编辑： 我认为 mixes 是要走的路。据我所知，我需要创建一个混合 text--bold 并将其应用于每个受影响的文本元素？

Answer 1

是的，这是个好主意。

BEM 风格中 wtite 的主要目标是：

所有都是 class，没有任何东西是嵌套。

因此，根据需要定义尽可能多的有用 class 是合法的：

示例：

.bold { font-weight: bold}
.bolder { font-weight: bolder }
.red { color: red}
.redbg {background-color: red}
.nomargin { margin: 0}

等等，

当然，您也可以使用以下方式修改特定元素样式：

.component--blue {
   color: blue;
}

并将此 class 附加到抽象 component 块中的任何元素

Answer 2

编辑：

关于 DRY 的 BEM 指南：https://cssguidelin.es/#dry

基本上，您不应该强迫自己寻找重复的代码行。但是如果一个特定的案例不止一次发生，你可以使用 mixin。

@mixin my-web-font() {
  font-family: "My Web Font", sans-serif;
  font-weight: bold;
}

.btn {
  display: inline-block;
  padding: 1em 2em;
  @include my-web-font();
}

[...]

.page-title {
  font-size: 3rem;
  line-height: 1.4;
  @include my-web-font();
}

[...]

  .user-profile__title {
    font-size: 1.2rem;
    line-height: 1.5;
    @include my-web-font();
  }

这让您的代码编写起来更清晰，但实际上会编译为重复行。所以我下面的回答还是有道理的。

恕我直言，我不同意@Kareem Dabbeet 的回答。

我不是 BEM 专家，但是如果您想遵循确切的约定，您的粗体文本应该保留它所绑定的元素的修饰符。所以你应该得到类似

的东西

.block__element--bold {
  font-weight: bold;
}

.otherBLock__element--bold {
  font-weight: bold;
}

尽管如此，我自己使用了很多可重用的类，惯例是根据您的 blocks/elements 结构来组织您的代码。没有提到一些全局实用程序类.

但是，您是对的，根据用例，它可能会导致代码重复。但是 BEM 完全是关于某种关注点的分离。 你应该阅读和写作你的 css 只关注它所绑定的 block/element 而不要看其他地方。 所以它是有道理的。

使用不与 BEM 一起绑定到任何块或元素的类可能会冒着在长运行.[= 中产生冲突的风险13=]

Answer 3

按照我对 BEM 的理解，你将 styles 和 semantics 分开。语义用css classes (.button--emphasized)表示，而样式用实际css (font-weight: bold)。这意味着你尽可能多地省略 css classes 中的实际样式（没有 class .bold），而是问问自己 为什么它是粗体? 并用 css:

表示

.button--emphasized,
.text--headline,
.input--required {
  font-weight: bold;
}

您仍然只写一次 font-weight: bold（不要重复自己）。但是，如果（无论出于何种原因）您决定强调的按钮不再是粗体，则您不必更改所有 html/component 文件中 .button 元素中出现的所有 .bold .然后，您只需从 font-weight: bold 列表中删除 .button--emphasized。

CSS BEM - 常见的约定 class

CSS BEM - Convention for common class

css

bem

所有都是 class，没有任何东西是嵌套。

CSS BEM - 常见的约定 class

CSS BEM - Convention for common class

css

bem

所有 都是 class，没有任何东西是 嵌套。

所有都是 class，没有任何东西是嵌套。