使用BEM的Sass嵌套

Question

我正在尝试弄清楚如何使用BEM改进我与sass的工作。我应该在下面的代码中更改任何内容吗？我认为它在HTML中是非常干净的，但在SASS中很难找出嵌套在哪个块中的内容。我在顶部有一个.c-header类，所有项目都在一行中使用'&‘。我怎样才能修复它并使它变得更好？

<header class="c-header">
        <nav class="c-header__nav">
            <div class="c-header__logo">
                <a href="#">
                    <div class="c-header__circle">
                        <i class="c-header____leaf fab fa-envira"></i>
                    </div>
                    <h1 class="c-header____title">treehouse</h1>
                </a>
            </div>
            <i class="c-header____burger fas fa-bars"></i>
            <ul class="c-header__menu">
                <li class="c-header__item"><a href="#">home</a></li>
                <li class="c-header__item"><a href="#">about</a></li>
                <li class="c-header__item"><a href="#">blog</a></li>
                <li class="c-header__item"><a href="#">portfolio</a></li>
                <li class="c-header__item"><a href="#">contact</a></li>
            </ul>
        </nav>
        <div class="c-header__content">
            <h1 class="c-header__caption">creative digital solutions</h1>
            <p class="c-header__paragraph">Lorem ipsum dolor sit amet consectetur.</p>
            <button class="c-header__button">view portfolio</button>
        </div>
    </header>``

Answer 1

这是BEM的目的之一:减少CSS对HTML结构的依赖。

这就是为什么我们没有针对孙子元素的特殊类。换句话说，这就是.block__element__sub-element类被禁止的原因。

根据the official documentation的说法

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

所以，是的，您的HTML在这里非常干净。我相信你的CSS也是干净的;)

PS:有些类的背景太多了，比如c-header____burger。

Answer 2

使用BEM，您应该致力于创建级联层次结构，以便您可以利用SASS嵌套并以类似于组件的结构编写SCSS。

c-header c-header__nav c-header__nav__logo c-header__nav__logo__circle -header__nav__logo__title

在这种情况下，你的粗鲁应该是：

.c-header {
  width:100px;
  
  &__nav {
    width:101px;
    
    &__logo {
      width:102px;
      
      &__circle { width:103px; }
      &__title { width:104px; }
    }
  }
}

请注意，建议的结构是相当猜测，因为我没有一个清晰的概述您的项目看起来，但我希望它有助于澄清您的疑惑。