CSS BEM 中的命名约定嵌套块和元素

Question

我是 BEM 世界的新手，正在寻找一些清晰的信息。 BEM 指南建议我使用以下方法：

.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}

<div class='block'>
    <div class='block__elem1'>
        <div class='block__elem2'></div>
    </div>
    <div class='block__elem3'></div>
</div>

假设我有以下代码。我不清楚我是否应该使用 trending-topics__image 和 trending-topics__title，或者 trending-topics--item__image 和 trending-topics--item__title，或者对我的元素使用不同的东西。我觉得 trending-topics__image 和 trending-topics__title 太笼统了，因为 trending-topics 容器也可能包含需要不同样式的 header 图像或标题。

<div class="trending-topics">
    <div class="container">
        <div class="row">
            <div class="col-2">
                <a class="trending-topics__item" href="#">
                    <img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/>
                    <span class="[WHAT NAME SHOULD I USE?]">Lorem ipsum</span>
                </a>
            </div>
            <div class="col-2">
                <a class="trending-topics__item" href="#">
                    <img class="[WHAT NAME SHOULD I USE?]" src="" alt=""/>
                    <span class="[WHAT NAME SHOULD I USE?]">Lorem ipsum</span>
                </a>
            </div>
        </div>
    </div>
</div>

Answer 1

BEM 非常易于学习和实施。还有一点请记住。 1. 如果你以后想像这样使用修饰符，你应该为父级使用短名称 class。

<div class="t-topic"><div>

2。选择简单的元素名称，以便您以后可以记住。喜欢（单位，缩略图，列表，项目）。

这是您的代码。

<div class="t-topics">
<div class="container">
    <div class="row">
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
    </div>
</div>

如果你想要这样的嵌套块，还有其他方法

<div class="t-topics">
<div class="container">
    <div class="row">
        <div class="col-2">
            <a class="link t-topics__link" href="#">
              <img class="link__image" src=""/>
              <img class="link__image link__image--other" src=""/> // Different image                   
              <span class="link__span">Lorem ipsum</span>
            </a>
        </div>
        <div class="col-2">
            <a class="t-topics__link" href="#">
                <img class="t-topics__image" src=""/>
                <span class="t-topic__span">Lorem ipsum</span>
            </a>
        </div>
    </div>
</div>

您可以从此链接了解有关 BEM 的更多信息。

https://www.toptal.com/css/introduction-to-bem-methodology。 https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/

CSS BEM 中的命名约定嵌套块和元素

Naming convention nested blocks and elements in BEM in CSS

html

css

bem