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头 c-header__nav c-header__nav__logo c-header__nav__logo__circle c-header__nav__logo__title

这样，您的SASS应该是：

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

请注意，由于我对您的项目外观没有清晰的了解，所以建议的结构是一个猜测，但我希望它有助于澄清您的疑问。

使用BEM进行Sass嵌套

2 个答案: