Question

这是我目前的html结构，我已经检查了其他来源，有些人有不同的意见，并且想要专门询问我的情况。

命名是否正确？以domainname作为主要块然后在domainname__pricelist上我会创建pricelist类，因此子元素下面的元素仅为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>

然而，对于这个目前的设置，我在定位pricelist__headers时遇到了我的sass规则问题，因为它会定位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

如果我的块具有复杂的结构及其元素，我该怎么办？嵌套？像block__elem1__elem2__elem3这样的CSS类看起来很可怕。

根据BEM方法，块结构应平整;您不需要反映块的嵌套DOM结构。因此，此案例的类名称为：

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

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

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

Answer 2

作为马吉德综合答案的一个重要内容，就BEM而言，我也摆脱了&_嵌套。当您重新访问样式表并查看这些3级深度嵌套时，它会变得太复杂。例如，我创建了元素/修饰符mixins，并以如下样式使用它们：

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

正如您所看到的，我们更容易阅读和理解我们所讨论的元素。

BEM元素嵌套命名和sass规则

2 个答案: