BEM 元素嵌套命名和 sass 规则

Question

这是我目前的html结构，我查过其他来源，有些人有不同的意见，想针对我的情况具体询问。

命名正确吗？将 domainname 作为主要块，然后在 domainname__pricelist 上我将创建 pricelist class 因此元素下的子元素将仅是 pricelist__headers 而不是 domainname__pricelist__headers

    <div class="domainname container">
    Main
    <div class="domainname__pricelist pricelist">
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers"> 
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
            <div class="col-md-3">
                <div class="pricelist__headers">
                    <span>.com</span>
                </div>
                <div>content</div>
            </div>
        </div>
    </div>

然而，在这个当前设置中，我的 sass 规则在定位 pricelist__headers 时遇到问题，因为它将定位 domainname__pricelist__headers 任何人都可以向我推荐解决方案或评论，如果我应该只使用 domainname__pricelist__headers 或 pricelist__headers 或者是否有任何 sass 规则可以删除主要的 domainname 并留给我 pricelist__headers

    .domainname{
    &__pricelist{
        &__headers{
            background: red;    
        }
    }
}

Answer 1

也许这有点令人困惑，但是，如果您只是认为一个块下的所有元素都应该是父块名称的子元素，那么编写规则就更有意义也更容易。你的情况

    <div class="domainname container">
        <div class="domainname__pricelist pricelist">
           <div class="domainname__priceheader">
           </div>
        </div>
   </div>

和

  .domainname{
    &__pricelist{

    }
    &__priceheader{
            background: red;    
        }
}

应考虑选择一个合适的名称以使其更有意义。

根据这个BEM's FAQ

What should I do if my block has a complex structure and its elements are nested? CSS classes like block__elem1__elem2__elem3 look scary.

根据边界元法，块结构应该被展平；您不需要反映块的嵌套 DOM 结构。因此，这种情况下的 class 名称将是：

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

而块的 DOM 表示可能是嵌套的：

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

除了 classes 看起来更好之外，它还使元素仅依赖于块。因此，在对界面进行更改时，您可以轻松地将它们跨块移动。块 DOM 结构的更改不需要对 CSS 代码进行相应更改。

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

Answer 2

作为 Majid 综合答案的本质，在 BEM 的情况下，我也会摆脱 &_ 嵌套。当您重新访问样式表并看到这些 3 层深度嵌套时，它变得太复杂了。例如，我创建元素/修饰符 mixins 并在样式中使用它们，如下所示：

@mixin e($element) {
  &__#{$element} {
    @content;
  }
}
.domainname {
  //...
  @include e(pricelist) {
    text-color: white;
  }
  @include e(priceheader) {
    background: red;
  }
}

如您所见，我们谈论的元素更容易阅读和理解。

BEM 元素嵌套命名和 sass 规则

BEM element nest naming and sass rule

html

css

sass

bem