了解 SASS 和 BEM

Question

这不是一个意见问题。我试图了解 BEM 约定的优势是什么。我想不通。你能给我指出正确的方向吗？

没有 BEM：

<div class="menu">
    <a class="item active" href="#">Link 1</a>
    <a class="item" href="#">Link 2</a>
</div>

.menu {
    background-color: red;
    .item {
        background-color: green;
        .active {
            color: red;
       }
    }
}

使用 BEM：

<div class="menu">
    <a class="menu__item--active" href="#">Link 1</a>
    <a class="menu__item" href="#">Link 2</a>
</div>

.menu {
    background-color: red;
    &__item {
        background-color: green
        &--active {
            color: red;
        }
    }
}

选择器 .menu .menu__item 而不是 .menu .item 有什么意义？我需要写更多的原因是什么？

Answer 1

也许在如此少量的代码中，BEM 是一种矫枉过正，但在较大的代码库中，类，例如 "active" 或 "open"，在调试时可能会误导您很多。摘自官方来源：

"However, when it comes to larger, more complex projects, how you organize your code is the key to efficiency in at least these three ways: it affects how long it takes you to write code, how much of that code you’ll have to write and how much loading your browser will have to do. This becomes especially important when you’re working with teams of themers, and when high performance is essential. - http://getbem.com/introduction/ "

希望这就是您正在寻找的那种 answer/insight。说实话，当我第一次读到 BEM 时，我自己也有点怀疑，但我在大型代码库上工作的经验让我爱上了它，并尽可能地实施它。

了解 SASS 和 BEM

Understanding SASS and BEM

html

css

sass

bem