html - BEM 组件/对象分离

Question

我们正在广泛使用 BEM，但遇到了多种构建和命名组件的方法，并且需要有关最佳实践的意见。我们将“对象”的概念用于可重用组件(例如 .box、.media、.btn)，将“组件”用于设计的 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

第二个选项更好，因为你最终得到的是语义 block ，而不是第一个中的类似内联 css 的方法。

您应该根据界面的功能而不是外观来考虑您的界面。否则更新设计或实际进行任何更改都会困难得多。