1

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

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

4

2 回答 2

1

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

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

于 2014-06-12T09:50:27.737 回答
0

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

您的第二个选项是语义模式 ( 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;
}
于 2014-10-12T07:15:01.700 回答