Html 边界元元素嵌套命名和sass规则

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

命名正确吗？将

domainname

作为主块，然后在

domainname\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu价格表
上创建
pricelist
类，这样than元素下的子元素将是
pricelist\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

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

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

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

选择一个合适的名字应该考虑到更有意义

据此,

如果我的块具有复杂的结构及其元素，该怎么办
是嵌套的吗？像block\uuu elem1\uuuu elem2\uuuu elem3这样的CSS类看起来很可怕

根据边界元法，块体结构应平整；您不需要反映块的嵌套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>

但是，如果您认为一个块下的所有元素都应该是父块名称的子元素，那么可能会有点混淆，这更有意义，也更容易编写规则。就你而言

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

选择一个合适的名字应该考虑到更有意义

据此,

如果我的块具有复杂的结构及其元素，该怎么办
是嵌套的吗？像block\uuu elem1\uuuu elem2\uuuu elem3这样的CSS类看起来很可怕

根据边界元法，块体结构应平整；您不需要反映块的嵌套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>

作为Majid全面回答的一个要点，在BEM的情况下，我还将去掉
&
嵌套。当您重新访问样式表并看到这些3层深嵌套时，它变得太复杂了。例如，我创建元素/修改器混合，并在如下样式中使用它们：

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

正如您所见，阅读和理解我们所讨论的元素要容易得多。
作为Majid全面回答的一个要点，在BEM的情况下，我还将去掉
&
嵌套。当您重新访问样式表并看到这些3层深嵌套时，它变得太复杂了。例如，我创建元素/修改器混合，并在如下样式中使用它们：

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

正如您所看到的，阅读和理解我们所讨论的元素要容易得多。
是否需要将
pricelist\uuu头
嵌套在scss中的
domainname
中？@thgaskell不一定，我这样做只是为了将某个页面或模块下的所有代码分组。是否需要将
pricelist\uuuu标题
嵌套在scss中的
domainname
中？@thgaskell不一定，我这样做只是为了将某个页面或模块下的所有代码分组。+1用于清楚解释。我已经和贝姆玩了一段时间了，有时我觉得它非常冗长。你知道还有哪些css命名/结构约定也很流行/稳定/经得起时间的考验吗？好吧，还有一些东西你可以遵循，比如SMACC、OOCSS或POSTSS，但总而言之，你只需要阅读它们，尝试它们，并为你找到最好的，因为可能在一个项目中使用SMACC+BEM会很好，在另一个项目中使用它们的组合。我建议您阅读一下SMACC及其作者建议的命名约定。但是，请记住，这一切都取决于您的项目和团队。+1表示清楚的解释。我已经和贝姆玩了一段时间了，有时我觉得它非常冗长。你知道还有哪些css命名/结构约定也很流行/稳定/经得起时间的考验吗？好吧，还有一些东西你可以遵循，比如SMACC、OOCSS或POSTSS，但总而言之，你只需要阅读它们，尝试它们，并为你找到最好的，因为可能在一个项目中使用SMACC+BEM会很好，在另一个项目中使用它们的组合。我建议您阅读一下SMACC及其作者建议的命名约定。但是，请记住，这完全取决于您的项目和团队。