Динамические классы и изменение вложенных элементов

Форум /

Здравствуйте, извините, за еще один пост. Просто решил разобраться окончательно и перестать писать в коде //TODO Может и другим будет полезно

Прочем доки, не нашел такого момента как динамический стиль.

Приведу пример, есть навигационный блок на сайте, при открытии меню некоторые компоненты внутри этого блока должны изменить свой вид.

Вот пример

<nav id="navigation-main" class="navigation-bar l-navigation-bar">
    <div class="navigation-bar__container">
        <div class="navigation-bar__toggle">
        </div>
        <div class="navigation-bar__logo nav-logo">
        </div>
        <div class="navigation-bar__menu l-navigation-menu">
            <div class="nav-menu">
            </div>
        </div>
        <div class="navigation-bar__phone-number nav-phone">
        </div>
    </div>
</nav>

Вот нажимает пользователь на меню navigation-bar__toggle и в JS добавляется класс is-menu-opened к элементу с id navigation-main

Собственно вопрос теперь как правильно сделать ? У меня есть две идеи Стоит заметить что на выходе после компиляции получаются практически одинаковые результаты, то есть разница лишь в препроцессоре в данном случае (SASS)

Переложить все обязанности на класс is-menu-opened, то есть он осведомленным в структуре HTML
```
.is-menu-opened
  height: 100%
  background-color: #000
  .nav-menu-list
    visibility: visible
    opacity: 1
  .nav-menu-list__item
    opacity: 1
```
Второй вариант, это чтобы сам модуль рисовал себя при определенном условии как надо. В данном каждый модуль должен знать что его могут обрамить в класс is-menu-opened, но с другой стороны нету зависимости от HTML структуры , пример
```
.nav-logo
padding-left: 5%
text-align: left
color: $white-color
.is-menu-opened &
 visibility: visible
```

Подскажите пожалуйста может есть какие-то еще более рациональные подходы и как правильно и элегантно решать подобные задачи. И может есть в общем какие-то замечания по структуре, буду признателен за критику и советы.

Спасибо большое.

7 years ago

kompolom

То что вы спрашиваете называется модификаторами. Это бы выглядело так

.navigation-bar_opened

7 years ago

tadatuta

Правильный вариант — это оторвать селектор по id и писать JS прямо для селектора .navigation-bar:

document.querySelectorAll('.navigation-bar').forEach(function(navBar) {
    // делаем нужную магию с любой копией navBar на странице
});

А для выражения изменения состояния использовать модификатор на родителе.

Если нужно повеситься на клик по элементу .navigation-bar, то стоит использовать делегирование и вешаться как раз из родительского блока. Событие будет всплывать, в обработчике можно проверить, что источником служит необходимый элемент и тогда выполнять нужную функцию. При этом на руках будет ссылка на текущий блок, а значит можно будет смело поставить этому блоку модификатор navigation-bar_opened (и в этом случае можно смело использовать вложенные селекторы).

Ссылки для подробного изучения:

https://ru.bem.info/forum/163/
https://ru.bem.info/methodology/faq/#Почему-нежелательно-использовать-вложенные-селекторы (внимание на вторую часть ответа, которая про можно).

Кстати, помимо i-bem есть легкие плагинчики для jQuery, которые упрощают общение с элементами и модификаторами в JS. Например, https://github.com/hoho/jquery-bem

7 years ago

CROSP

Спасибо большое за подробный ответ. Немного не понял по поводу модификатора, то есть в моем случае можно правильно будет заменить is-menu-opened на модификатор элемента к котором он применяется, то есть navigation-bar_opened или navigation-bar--opened, верно ? А уже с модификатором можно использовать вложенные селекторы, от этого никуда не уйти. Я правильно понял ?

Спасибо

7 years ago

tadatuta

@CROSP да, все так

7 years ago

belozer

то есть в моем случае можно правильно будет заменить is-menu-opened на модификатор элемента к котором он применяется, то есть navigation-bar_opened или navigation-bar--opened

Да, всё верно.

А уже с модификатором можно использовать вложенные селекторы, от этого никуда не уйти.

Только на элементы. Модификатор блока модифицирует блок, а т.к. элементы это часть блока, то модификатор блока может модифицировать и элементы.

т.е. получается так .block_mod_val .block__elem {}

7 years ago

CROSP

Спасибо большое за очень информативные ответы. Все теперь стало понятно.

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