代码之家 › 专栏 › 技术社区 › konichiwa

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

bem css html

konichiwa · 技术社区 · 8 年前

我是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\uuu图像 和 trending-topics\uu标题 太笼统了,因为 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>

1 回复 | 直到 8 年前

Ibrahim Osama 8 年前

边界元法很容易学习和实现。还有一点要记住。如果您想在以后使用类似这样的修饰符,那么应该为父类使用短名称。

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