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

<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.如果您希望稍后使用修饰符，则应使用父类的短名称。

<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中命名约定嵌套块和元素

1 个答案: