Как переключать модификаторы по бэм?

Question

[Ankozar]

Пытаюсь познать БЭМ. Везде, где о нём говорят, сообщают только следующее: "возьмите модификатор и переключите его".

А как именно переключать?

Например, в jquery есть методы
addClass, hasClass, removeClass и toggleClass

То есть, если я хочу перекрасить кнопку, то создам функцию типа:
$('.btn').addClass('btn-red');

Всё к этому сводится, я правильно понимаю?

Comments

[Даниил Попов]

Ага, только вы не модификатор переключаете

[Ankozar]

Даниил Попов, если вы имеете в виду, что это не переключение, а добавление, то да, я неточно задал вопрос. Скорее - "как производить операции с модификаторами?"

[Даниил Попов]

Ankozar, в том числе и так как вы написали

[Ankozar]

Даниил Попов, кстати, ещё такой вопрос. Если мне нужно сделать плавное появление элемента, как это сделать по бэм?
Раньше, например, я указывал блоку display: none, а затем писал на jq функцию .fageIn. А теперь, , получается, так?
<div class='block block_hidden'>

.block {
//smthng
}
.block_hidden {
display: none;
}

И затем я удаляю модификатор .block_hidden?
А как быть с плавностью появления? Красоты ж охота.

[G F]

Получи css и js и будет тебе красота

[G F]

Потому что плавное появление делается в несколько строчек и безо всякого жиквери

[Иван В]

Ankozar, мне кажется вы натягиваете сову на глобус. БЭМ это больше про нейминг css селекторов, а не про красивые анимации.

[Ankozar]

Иван В, но ведь мне нужно изменять блоки на странице. Бэм предлагает делать это с помощью модификаторов. Вот я и пытаюсь разобраться.

[Aricus]

Ankozar, БЭМ - это способ оформления CSS, и всё. На js это никак не влияет.

addClass, hasClass, removeClass и toggleClass

Да, переключать именно так, класс целиком. Если вы хотите сделать переключение более универсальным, проще будет добавить data-атрибут.

Answer 1

[Иван В]

БЭМ предлагает методологию (подход, архитектуру) разделения интерфейса на независимые блоки.
Если у некоторых блоков или элементов есть особенный внешний вид или поведение (отличающие их от аналогичных блоков или элементов), то это реализуется с помощью модификаторов.
Например, список с "активным" \ "выделенным" пунктом:

<ul class="list">
  <li  class="list__item">item 1</li>
  <li  class="list__item">item 2</li>
  <li  class="list__item list__item_active">item 3</li>
</ul>

С помощью модификатора "list__item_active" последний пункт списка помечается активным.
На этом полномочия БЭМ заканачиваются )
БЭМ все равно какие стили или анимации вы будете использовать в "list__item_active". И все равно как вы будете добавлять модификаторы - вручную редактируя html или с помощью js.

БЭМ про общий подход наименования и использования селекторов, не про конкретные реализации какого-либо поведения или внешнего вида интерфейсов.

Comments

[Ankozar]

Иван В представьте, что я не умею управлять самолётом. Я вас спрашиваю: "Как управлять самолётом? Как взлететь, хотя бы?:" А вы мне: "Нужно летать красиво!"

[Иван В]

Ankozar, если вам что-то все еще не понятно, спрашивайте, а не играйте в аналогии.