Bemit : 扩展公约

Question

大家好，

我有一个关于 Bemit 约定 的问题，只是为了确定您如何使用它并查看所有开发者可能的收敛：

如果你有，例如：

"div" object，带 class"o-item"
内含2个元素
"o-item__title"=38=]
"o-item__text"=38=]

假设您想要标题中的一个名为“图标”的项目，让我们看看您是否同意我的看法：

<div class="o-item">
    <h1 class="o-item__title">
       <span>Some text here for title</span>
       <i class="o-item__title__icon"></i>
    </h1>
    <p class="o-item__text">Text of item</p>
</div>

您是否对名为 class 的元素感到震惊：“class='o-item__title__icon'”？

我知道我们都叫他“class:'o-item__icon'”，但有时我们可能需要上面的约定。

(命题解释：o-item__title__icon = Title is a part of Item Object, and Icon is a part of Title of Item Object)

请说出你的看法！

此致。

Answer 1

BEM quick start guide 说：

An element is always part of a block, not another element. This means that element names can't define a hierarchy such as block__elem1__elem2.

如果您需要一个图标作为标题的一部分 - 只需在您的代码中再添加一个块（称为 .o-title），图标将是一个块的元素 .o-title.

<div class="o-item">
    <h1 class="o-item__title o-title">
       <span>Some text here for title</span>
       <i class="o-title__icon"></i>
    </h1>
    <p class="o-item__text">Text of item</p>
</div>

这叫做 mixes in BEM，你可以在 BEM 站点上查看它是如何工作的，但简而言之，这意味着你可以拥有全局样式（font-size、颜色等）对于 .o-title 及其图标，将在您网站的任何地方使用并且您可以拥有 .o-item__title class用于.o-item块中的标题定位.

Bemit : 扩展公约

Bemit : Extending the convention

html

css

sass

naming-conventions