How to switch modifiers by bam?

Question

JavaScript

I'm trying to learn BEM. Wherever they talk about it, only the following is reported: "take a modifier and switch it."

How exactly to switch?

For example, in jquery there are methods
addClass, hasClass, removeClass и toggleClass

That is, if I want to recolor the button, then I will create a function like: It all comes down to this, do I understand correctly?
$('.btn').addClass('btn-red');

Answer 1

BEM offers a methodology (approach, architecture) for dividing an interface into independent blocks.
If some blocks or elements have a special appearance or behavior (distinguishing them from similar blocks or elements ), then this is implemented using modifiers .
For example, a list with an "active" \ "highlighted" item:

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

The "list_item_active" modifier marks the last item in the list as active.
This is the end of BEM's authority )
BEM doesn't care what styles or animations you use in "list__item_active". And it doesn't matter how you add modifiers - manually editing html or using js.
BEM is about the general approach of naming and using selectors, not about specific implementations of any behavior or appearance of interfaces.