BEM 组件/对象分离答案

【问题标题】：BEM component / object separationBEM 组件/对象分离
【发布时间】：2014-06-10 14:48:21
【问题描述】：

我们正在广泛使用 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;
}

想法、意见和其他想法都非常受欢迎！

【问题讨论】：

我无法编辑您的问题，只需更改一个字符即可，但您在第一个代码示例 <div class="relatively-positioned> 中遗漏了引号。
谢谢@morkro。现已修复。

标签： html css naming-conventions bem

【解决方案1】：

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

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

【讨论】：

【解决方案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;
}

【讨论】：