BEM组件/对象分离

Question

我们广泛使用BEM，但正在尝试构建和命名组件的几种方式，并希望就最佳实践提出意见。我们正在使用＆＃39;对象＆＃39;的概念。对于可重用的组件（例如.box，.media，.btn）和＆＃39;组件＆＃39;对于设计的UI组件，它们往往是对象的组合。

作为问题的一个例子，请从线框中考虑这个：

与图像相关的想法与该特定项目可用的其他图像的数量重叠。

至少有两种解决此布局的方法，我们正试图找出最佳选择。

---

选项1

在标记/ CSS中应用布局而不是作为组件。以下所有样式都可以在项目之间重复使用;没有一个是项目特定的。

HTML ：

<div class="relatively-positioned">
    <img src="..." alt="" />
    <div class="box box--rounded  absolutely-positioned offset--10-10">12</div>
</div>

CSS ：

.box {
    padding: 5px;
}

.box--rounded {
    border-radius: 5px;
}

.relatively-positioned { position: relative; }
.absolute-positioned { position: absolute; }

.offset--10-10 { top: 10px; left: 10px; } 

---

选项2

将其实现为由图像和计数框组成的组件。

HTML ：

<div class="image-preview">
    <img class="image-preview__img" ... />
    <div class="image-preview__count  box box--rounded">12</div>
</div>

CSS ：

相同的CSS适用于box / box--rounded，并且对于项目之间的重复使用是通用的。该组件仅为此项目定义：

.image-preview {
    position: relative;
}

.image-preview__count {
    position: absolute;
    top: 10px;
    left: 10px;
}

---

思想，观点和其他想法都非常受欢迎！

Answer 1

第二个选项更好，因为你在第一个选项中最终会使用语义块而不是类似内联css的方法。

你应该根据它的作用来考虑你的界面，而不是它的外观。否则，更新设计或实际进行任何更改都会更加困难。

Answer 2

最佳选择取决于您的设计。重复视觉模式可以实现为可重用块，语义应该用于所有特定情况。

您的第二个选项是语义模式（image-preview）和视觉模式（box）的混合，可能对您的设计有益。

如果在许多块中重复使用偏移10-10的模式，则可以将其实现为视觉模式块。但在第一选择中，类relatively-positioned和absolutely-positioned是一个坏主意。这是视觉模式和CSS技术之间的混淆。

偏移的可视化模式实现示例：

HTML：

<div class="image-preview offset-container">
    <img class="image-preview__img" ... />
    <div class="image-preview__count box box--rounded offset-container__offset">12</div>
</div>

CSS：

.offset-container {
    position: relative;
}
.offset-container__offset {
    position: absolute;
    top: 10px;
    left: 10px;
}