了解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”之类的类在调试时会误导您很多。摘自官方资料：

“但是，当涉及到更大，更复杂的项目时，至少在这三个方面，组织代码是提高效率的关键方式：它会影响您花费多长时间编写代码，其中有多少您将要编写的代码以及浏览器的负载量去做。当您使用团队，以及何时需要高性能。-http://getbem.com/introduction/“

希望这是您想要的答案/见解。 tbh当我第一次阅读有关BEM的信息时，我有点怀疑，但是我在大型代码库上的工作经验使我喜欢它，并尽可能地实现它。