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

我是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容器还可能包含需要不同样式的标题图像或标题。

<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>

最佳答案

BEM非常易于学习和实施。还有一点要牢记在心。
1.如果以后要使用修饰符，则应为父类使用简称。

<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/