Understanding SASS and BEM

Question

This is not an opinion question. I'm trying to understand what's the advantage of BEM convention. I can't figure it out. Can you point me to the right direction?

Without 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;
       }
    }
}

With 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;
        }
    }
}

What's the point of having a selector .menu .menu__item over .menu .item? What's the reason I need to write more?

Merely writing the sentence "This is not an opinion question." at the top of an opinion question is not enough to make it not an opinion question. You have to write your question such that it asks for objective facts not subject to opinions. For instance, this question would not be an opinion question if you were to phrase it as "please provide me with references as to how writing `.menu .menu__item .menu__item--active` is more scalable or efficient or maintainable than writing `.menu .item.active`. You would also do without mentioning SASS, as the question stands without reference to it. — Heretic Monkey, Apr 28 '20 at 19:42

score 2 · Accepted Answer · answered Apr 28 '20 at 19:34

Perhaps in such a a small amount of code BEM is an overkill, but on larger codebases classes such as "active" or "open" can mislead you a lot when you are debugging. taken from the official source:

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

Hope this was the kind of answer/insight you were looking for. tbh I was a bit sceptic myself when I first read about BEM but my experience working on large codebases has lead me to love it and implement it whenever possible.

Understanding SASS and BEM

1 Answers1