bem-site / bem-forum-content-ru

Content BEM forum for Russian speak users
MIT License
56 stars 6 forks source link

БЭМ (как способ именования) - нужны ли классы для JS селекторов? И если да, то зачем они? И как они должны выглядеть? #1451

Open nu-privet opened 6 years ago

nu-privet commented 6 years ago

Здравствуйте! Учусь верстать по БЭМ. С HTML и CSS я разобрался. Дошел до написания JS. И возник вопрос. Нужно ли писать какие-то специальные классы для Javascript селекторов? И если да, то зачем они? И как они должны выглядеть? Просто к уже существующим классам добавляется префикс "js"? Например, js-block__element?

Realetive commented 6 years ago

Нет, какой-то необходимости в префиксе нет. Если используется фреймворк i-bem.js, то наличие у блока или элемента класса i-bem уже,в принципе, косвенно указывает на то, что этот DOM-узел имеет реализацию в технологии JS. Технологии — это общепринятый термин, когда говорят о какой-то БЭМ-сущности. Каждая такая сущность может быть представлена несколькими технологиями и по идее нас не должно волновать, сколько их у этой сущности в каждый момент времени. Например, есть «поле для ввода» (блок input). Когда мы работаем над его разметкой, мы реализуем его в технологии HTML (или JSX, или XJST, или в любой другой, отвечающей за то, какое HTML-содержание будет в результате). Мы можем написать тесты для этой технологии, которые будут проверять только правильность наличия классов и атрибутов конкретно для этой технологии. Поэтому мышление в терминах «технологии», кхм…, удобно =) . Когда структура готова, можно приступить к стилизации этого компонента. Например, в технологии CSS. Динамика будет в технологии browser.js, серверная часть — в node.js. На выходе получаем такой «букет»:

input/
├── input.bemhtml.js
├── input.bemtree.js
├── input.browser.js
├── input.css
├── input.jsx.js
├── input.node.js
├── input.ts
└── input.tests/
    ├── input.bemjson.js
    └── input.html

Если для каждой технологии добавлять префиксы, получится кошмар.