Понимание SASS и BEM - PullRequest
Новая
       43

Понимание SASS и BEM

3 голосов
/ 24 апреля 2020

Это не вопрос мнения. Я пытаюсь понять, в чем преимущество конвенции БЭМ. Я не могу понять это. Можете ли вы указать мне правильное направление?

Без БЭМ: 

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

С БЭМ: 

<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? По какой причине мне нужно больше писать?

1 Ответ

2 голосов
/ 28 апреля 2020

Возможно, в таком небольшом количестве кода BEM является излишним, но в больших кодовых базах такие классы, как «активный» или «открытый», могут сильно ввести вас в заблуждение при отладке. взято из официального источника:

"Однако, когда речь идет о более крупных и сложных проектах, то, как вы организуете свой код, является ключом к эффективности по крайней мере этими тремя способами: это влияет на то, как долго вам нужно написать код, сколько из этого кода вам придется написать и сколько потребуется загрузки вашего браузера. Это становится особенно важным, когда вы работаете с группами разработчиков и когда важна высокая производительность. http://getbem.com/introduction/ "

Надеюсь, что именно такой ответ / понимание вы искали. Я сам был немного скептичен c, когда впервые прочитал о BEM, но мой опыт работы с большими кодовыми базами привел меня к тому, что я полюбил его и реализовал, когда это было возможно.

...