Как использовать БЭМ?

Question

[Scryppi]

Читал про методологию БЭМ. И потом мне сказал старшой-"можешь его и модифицировать как тебе удобно писать код"
И я начал верстать сайты как мне было удобно и реально ощутил, что верстаю очень быстро удобно и легко дебажу код, в общем сказка. Но злой программист говорит что это говнокод, когда в элементе присутствуют столько классов.

<button class="custom__button black__button login__forgot reg__button right__part mob-full__width">
create an account
</button>

у меня есть вспомогательные классы типа: right__part mob-full__width.
Вообще right__part делает тоже, что и pull-right у бутстрапа. но в бутстрапе он использует !important, что мне не нужно.
И есть custom__button это моя обычная кнопка на сайте, вместо button потому что я боюсь когда подключу какой нибудь плагин или фреймворк css, то у него тоже такие селекторы будет ну порушится все, поэтому всегда использую нижние подчеркивание у своих элементов и минимум два слова использую в классах. Правильно ли я делаю? Меня не закидают камнями если я попаду в компанию с большой группой верстальщиков?

Comments

[Антон Спирин]

Аббревиатура БЭМ расшифровывается как Блок Элемент Модификатор, а использование этой методологии подразумевает их наличие. У вас же, даже не bootstrap style, но что-то рядом с ним и далеко от БЭМ. От БЭМ, видимо, только нижние подчеркивания.

[Ярослав Иванов]

1) У вас не БЭМ
2)

Но злой программист говорит что это говнокод

Это его личные проблемы.

[Hyubert]

Ну если следовать канону то что-то такое (пример из библиотеки bem-components):

<a class="button button_theme_islands button_size_m button_type_link button__control i-bem" data-bem='{"button":{}}' role="link" href="https://bem.info/">
<span class="button__text">Попробуй БЭМ</span>
</a>

Answer 1

[sim3x]

У Макеева был видос про таких "верстальщиков" https://wsd.events/2014/04/12/pres/bem-ok/
Безотностильно бем - так никто не делает
У вас завтра тот блок потребуется ресайзить и поставить влево, а название так и останется "райт__*"

Класс должен давать описание блока - не "где?", а "что?"

Есть обертки и контейнеры, которые могут иметь признаки райт, лефт, боттом, топ, но и в их имени лучше не использовать позицию или признаки
Да-да, райт__блуе, ред--бек, абсолюте-флоат__ также никто не испольует

Comments

[Scryppi]

а использовать для удобства вспомогательные классы right__part mob-full__width не надо? Они все равно же в бутстрапе есть, то есть их все равно используют

[sim3x]

Scryppi, нет, не надо

Нужно написать

.product-container
  @extend .float-left

[Scryppi]

sim3x, я просто привык использовать вспомогательные классы как в бутстрапе или их использование тоже считается плохой практикой?

[sim3x]

Scryppi, как используете?

[Scryppi]

sim3x,

<button class="custom__button black__button login__forgot reg__button right__part mob-full__width">
create an account
</button>

в бутстрапе ведь используют pull-right col-xs-12, mob-full__width это такой же col-xs-12 только для 480 разрешения

[sim3x]

Scryppi,
бутстрап фреймворк
бутстрап ничего не знает про вашу задачу

вместо списка классов, которые никак не описывают кнопку следует использовать имя со смыслом

Answer 2

[Dubrovin]

БЭМ - это не про CSS.
по БЭМ у вас темпплейт компонента (блока), например в PHP, должен лежать в одной папке с CSS/JS компонента. И вы могли этот код использовать повторно в других компонентах, динамически создавать и удалять эти компоненты на странице и так далее. Ключевая идея здесь: исключить дублирование кода на всех уровнях приложения.