Question

我对BEM结构有疑问。混合元素/修饰符在语义上是否正确？我有一个英雄和投资组合模块。我想在hero模块中使用portfolio__item，但它应该使用hero__item的基本样式。这是一种正确的方法吗，是否“允许”混合这些元素？

<section class="hero hero--collage hero--bottom-decoration">    
    <div class="portfolio__item hero__item hero__item--animated">
        <a href="http://www.google.nl"> 
            <div class="hero__hover">
                <span class="hero__hover__content h1">Hover title</span>
            </div>
            <img src="http://www.google.nl" class="hero__image">
        </a>
    </div>
</section>


<section class="portfolio">
    <div class="portfolio__item">
        <a href="http://www.google.nl"> 
            <img src="http://www.google.nl" class="hero__image">
        </a>
    </div>
</section>

Answer 1

＆＃34;混合元素/修饰符＆＃34;在语义上是否正确？ - 我假设您要将portfolio__item元素放在hero块中 - 这不是一件好事。您可以在块中嵌套块，但不能在另一个块的元素中嵌套元素。

您可以将修饰符用于hero__item元素，如

<div class="hero__item hero__item--portfolio"></div>

会改变它的风格。

Answer 2

你可以做任何你想做的事。但BEM方法论说：

阻止集名称空间

读这篇文章有点乱。我一眼就能理解。 BEM的目标 - 单独阻止，因此您不需要再次编写相同的块。风格也一样。使用此修改器和修改器，您可以重复使用并调整所需的每个块。

您可以混合使用块和元素

<img src="http://www.google.nl" class="block-name hero__image">

所以在＆＃39; block-name＆＃39;您可以匹配每个实例的样式。在hero__image或其他元素上，您可以匹配独特的样式。

您无法创建元素元素

你不需要写2 lvl。导致块集名称空间的名称。

<span class="hero__hover__content h1">Hover title</span>

只需

<span class="hero__hover-content h1">Hover title</span>

docs：https://en.bem.info/methodology/naming-convention/

BEM css - 混合元素/修饰符

2 个答案: