Корректная запись в БЭМ и SCSS

Доброго времени суток. Возникли затруднения как правильно писать модификаторы. Есть код:

<nav class="headerMenu">
        <a href="#" class="headerMenu__link">
            <span class="headerMenu__button">
                <span class="headerMenu__burger"></span>
            </span>
            <span class="headerMenu__text">Пункт меню</span>
        </a>
</nav>

При клике на ссылку с классом :

headerMenu__link

У данной ссылки добавляется класс "-active".

После чего нужно применить стили к:

headerMenu__button

Что приводит к проблеме, и вопросу. Правильное решение или нет, и как правильно сделать.

Ниже приведен SCSS. Думаю что где-то делаю не правильно. Как будет правильно по БЭМ?

.-active {
    .headerMenu {
        &__button {
            background-color: rgb(91, 66, 219);
        }
        &__burger {
            background-color: rgb(91, 66, 219);
            &:before {
                top:0;
                transform: rotateZ(45deg);
            }
            &:after {
                bottom:0;
                transform: rotateZ(-45deg);
            }
        }
    }
}
.headerMenu {
   /* all scss */
}

7 years ago

godfreyd

Привет. Не знаю, какую задачу CSS в твоем примере решает, но такая логика совсем по БЭМовски:

<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <style type="text/css">
        .headerMenu__link_active .headerMenu__button {
            background-color: rgb(91, 66, 219);
        }
        .headerMenu__link_active .headerMenu__burger {
            background-color: rgb(91, 66, 219);
        }
        .headerMenu__link_active .headerMenu__burger::before {
            top:0;
            transform: rotateZ(45deg);
        }
        .headerMenu__link_active .headerMenu__burger::after {
            bottom:0;
            transform: rotateZ(-45deg);
        }
        .headerMenu {
           /* all scss */
        }
    </style>
</head>
<body>

<nav class="headerMenu">
    <a href="#" class="headerMenu__link headerMenu__link_active">
        <span class="headerMenu__button">
            <span class="headerMenu__burger"></span>
        </span>
        <span class="headerMenu__text">Пункт меню</span>
    </a>
</nav>

</body>
</html>

7 years ago

YasKur

Спасибо godfreyd. Как должно работать: Кликаем по ссылке headerMenu__link, js добавляет или удаляет нужный класс. При эктиве один внешний вид, без эктива другой. Хотелось бы корректно это написать на препроцессоре чтобы сохранилась логика. Сейчас это -

<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <style type="text/css">
    .-active {
        .headerMenu {
            &__button {
                background-color: rgb(91, 66, 219);
            }
            &__burger {
                background-color: rgb(91, 66, 219);
                &:before {
                    top:0;
                    transform: rotateZ(45deg);
                }
                &:after {
                    bottom:0;
                    transform: rotateZ(-45deg);
                }
            }
        }
    }
    .headerMenu {
       /* all scss */
    }
    </style>
</head>
<body>
    <!--active-->
    <nav class="headerMenu">
        <a href="#" class="headerMenu__link -active">
            <span class="headerMenu__button">
                <span class="headerMenu__burger"></span>
            </span>
            <span class="headerMenu__text">Пункт меню</span>
        </a>
    </nav>
     <!--default-->
    <nav class="headerMenu">
        <a href="#" class="headerMenu__link">
            <span class="headerMenu__button">
                <span class="headerMenu__burger"></span>
            </span>
            <span class="headerMenu__text">Пункт меню</span>
        </a>
    </nav>
</body>
</html>

Т.е. Если мы используем класс headerMenu__link_active то логика потеряется. И придется писать в scss. Это будет правильно?

<html>
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <style type="text/css">
   .headerMenu__link_active {
        .headerMenu {
            &__button {
                background-color: rgb(91, 66, 219);
            }
            &__burger {
                background-color: rgb(91, 66, 219);
                &:before {
                    top:0;
                    transform: rotateZ(45deg);
                }
                &:after {
                    bottom:0;
                    transform: rotateZ(-45deg);
                }
            }
        }
    }
    .headerMenu {
       /* all scss */
    }
    </style>
</head>
<body>

</body>
</html>

7 years ago

godfreyd

Привет. .headerMenu__link_active — это модификатор, который вы навешиваете JS. Логика не потеряется. Для JS разницы нет, как вы назовете класс, просто .-active или .headerMenu__link_active. Зато во втором варианте сразу понятно, что active.

Чтобы оставлять комментарии, необходимо авторизоваться.