Как понять БЭМ, и что мотивирует верстальщик в использовании его?

Question

[Alexander]

Мне как back-end - щику трудно ужиться с этим БЭМ - ом. Зачем БЭМ когда есть SASS/SCSS/LESS. Недавно мне нужно было сажать верстку на движок и, вот что я увидел при первой стр. :

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

Кнопка простая, background да color.
Шесть классов для простого button в регистрации. У меня код в IDE от JetBrains уходит далеко за белую полосу. На вопрос верстальщику что это такое: "Это бэм, я использую один стиль несколько раз и т.д". Долго спорили, почему ты не можешь через родителя добираться к дочернему элементу ? где лаконичность ? где миксины ? почему ты не делаешь наследовать классов в своем SCSS ?. А когда просматривал код через панель разработчика то увидел настоящие MMO RPG PVP битву, зуб за зуб, стиль за стиль, по 3 раза все перебивается. Так по мне БЭМ это вообще огромный костыль а не методология.

Comments

[Андрей]

Это (в коде) не БЭМ. По БЭМу должно быть как-то так:

<button class="button account__button button_black button_big">
create an account
</button>

В этом коде button описывает стандартную кнопку, account__button - положение стандартной кнопки в блоке account, а button_black и button_big делает стандартную кнопку черной и большой соответственно.
Такой подход позволяет реиспользовать стили. Не копировать их снова и снова, а реиспользовать уже написанные. Ну и другие плюхи имеются.
А просто большое число подчеркиваний - это не обязательно БЭМ, это может быть просто странное именование классов

[alex]

зачем вы указываете верстальщику как делать его работу, к тому же если вы и бэм от sass не отличаете? а в разметке не бэм.

[Alexander]

Alex:

где миксины ? почему ты не делаешь наследовать классов в своем SCSS ?

[Дмитрий Локшин]

Alexander: Миксины и SCSS здесь вообще не при чем. Андрей Андрей дал Вам хороший ответ, в который Вы, видимо, не захотели вникать. Просто не в обиду будет сказано, но скорее всего, раз Вы уже так скептически относитесь к БЭМ, Вам его не понять, пока не прочувствуете все на своей "шкуре", когда проект разрастается и одни стили начинают перебивать другие.

[alex]

Alexander: и? что вы мне копипастите? я это уже прочитал. не нужно называть бэм костылем, если вы и ваш верстальщик в него не умеете

[Полина]

почему ты не можешь через родителя добираться к дочернему элементу

Потому что потом получаются четырехэтажные селекторы вида .block-one.two .red-list div p:nth-child(100500), потом проект расширяется, за дело берется другой верстальщик, и, используя безобидную разметку, получает любопытный результат, потому что пять тысяч строк назад первый верстальщик стилизовал какой-нибудь спан через .list-redbullet span. Конечно, это решается за пару минут с помощью инструмента разработчика в браузере, но когда таких моментов много, это затрудняет работу.
Хотя, конечно, это другая крайность.

Answer 1

[Дмитрий Лузанов]

class="custom__button black__button login__forgot reg__button right__part mob-full__width"

На вопрос верстальщику что это такое: "Это бэм"

Вам нагло соврали. Это говнокод.

Понять BEM

Comments

[Сергей Горячев]

И простить.

[sim3x]

И закопать.

[Андрей Токмаков]

Собственно верно, это не БЭМ, это какое то полное Г

[Дмитрий Локшин]

Согласен. Сейчас очень много таких "супер верстальщиков", которые делаю подобное. Когда смотрю чужой код и вижу там такое, хочется в лицо плюнуть.

[Gregory Bass]

Похоже это верстальщик думает что БЭМ это два нижних подчеркивания в имени класса и много классов ))))))))

Answer 2

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

1) Тебе как back-end'еру какое дело до классов ?
2) Ты знаешь в чем различие БЭМ и SASS ?
БЭМ - это методология написание классов.
SASS - это препроцессор.

БЭМ - Это больше масштабируемость а уже потом лаконичность. Забудьте про селекторы (только если они действительно нужны).

А когда просматривал код через панель разработчика то увидел настоящие MMO RPG PVP битву, зуб за зуб, стиль за стиль, по 3 раза все перебивается

Это криворукость разработчика. БЭМ тут ни при чем.

Так по мне БЭМ это вообще огромный костыль а не методология

Ты просто не познал дзен БЭМа.

А вообще в вопросе у тебя говнобём а не БЭМ.

Comments

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

MaxKorz: Это костыль, на котором сидят крупные проекты, сам яндекс и часть сервисов гугла.

[Alexander]

Ярослав Иванов: можно ссылку пожалуйста ?

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

Alexander: На что ?

[Alexander]

Ярослав Иванов: на котором сидят крупные проекты, сам яндекс и часть сервисов гугла

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

Alexander: Ссылка на яндекс ? yandex.ru
google ?
"БЭМ также использована в таком выпущенном в 2015 году продукте Google, как Material Design Lite, HTML5-фреймворке, наподобие Twitter Bootstrap, поддерживающем Material design."
Крупные проекты ?
new.mega.ru

[Дмитрий Локшин]

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

Answer 3

[dom1n1k]

От БЭМ-а тут только двойные подчеркивания. Тут вообще всё неправильно.

Answer 4

[Евгений Вольф]

Мне как back-end - щику трудно ужиться с этим БЭМ - ом.

Вам это совершенно не обязательно делать.

Зачем БЭМ когда есть SASS/SCSS/LESS.

Что-то из серии "Зачем мне холодильник, если я не курю", ну вы понимаете... :)

Шесть классов для простого button в регистрации.

Такого эффекта можно добиться и без БЭМ.

У меня код в IDE от JetBrains уходит далеко за белую полосу.

Обычно это решается с помощью комбинации Ctrl+Alt+L в IDE от JetBrains.

"Это бэм, я использую один стиль несколько раз и т.д".

БЭМ придумали не для того, что бы "использовать один стиль несколько раз", если почитать историю, то БЭМ был создан для решения вполне конкретных задач, о них Вы в принципе можете прочесть на оф. сайте БЭМа (не рискну перечислять самостоятельно, дабы не исковеркать смысл).

почему ты не можешь через родителя добираться к дочернему элементу ? где лаконичность ? где миксины ? почему ты не делаешь наследовать классов в своем SCSS ?

Не знаю :)

Так по мне БЭМ это вообще огромный костыль а не методология.

Отчасти Вы правы, но лишь от части. От "насколько большой части" - сказать трудно. Всё зависит от Вашего восприятия и субъективной реальности происходящего. Колоть монитором орехи - "большой костыль", но не от того, что монитор плохой, монитор хороший, но он создан для решения несколько других задач. Так же и БЭМ создавался для решения задач, с которыми он более ли менее успешно справляется. Проблема тут не в самом БЭМе, а в том, что толпы верстальщиков (сомнительного качества) кинулись "за новомодной соской"... как в басне Крылова - "Мартышка и очки", применять этот самый БЭМ там где надо и не надо. Препроцессор, например, SASS - это круто. Но это не значит, что для стиля "в 3 селектора" нужно за собой тащить целый препроцессор, нужно понимать, когда он действительно нужен, а когда CSS < 1Кб и можно обойтись "руками" (без препроцессоров).

БЭМ - это не только методология, но и ряд других инструментов, без которых он как по мне (*исключительно личное умозаключение, на истину не претендует), примерно настолько же полезен, насколько полезен SASS без своего "компилятора". Есть масса способов написать код лучше не хуже чем с применением БЭМ, которые вполне себе успешно работают в своём контексте.

P.S. Я не однократно встречал т.н. "БЭМ" код в проектах, где он вообще ни в какую не упёрся, но этом обусловлено не тем, что "БЭМ плохой", а тем, что верстальщик не может принимать оптимальных решений. Это выглядело как если бы, человек научился пользоваться пассатижами и побежал бы ими делать "всё", и колоть орехи и забивать гвозди и снимать кастрюлю с плиты, что бы не обжечься.

Answer 5

[Gregory Bass]

Столько комментов и добавить то нечего)
БЭМ это модульность. Каждая верстка это словно создание фреймворка наподобие бутстрап. Если лендинг секций на 10 к примеру верстаешь, то сверстал по БЭМ секции 2-3 а дальше только классы расставляй готовые и иногда модификаторы добавляй. Или многостраничник, основные элементы сверстал и так же только классы расставляй, стили уже готовы.

А если смотреть HTML код с правильным БЭМ, то получается как самодокументируемый код в программировании. Все ясно из названий классов и видно где частью вёрстки независимый блок с элементами внутри. Видно состояние элементов, типа

menu__link_active
card_shadow
button_red
section__title_blue

В вашем примере результат идиотизма верстальщика, ему можно смело руки оторвать.

А Sass это просто более удобая работа со стилями. Препроцессоры не дают модульности в работе над проектом. Неоспоримые удобства - однозначно, сам сасс использую и написал свою адаптивную сетку, когда вся адаптивка происходит в стилях, а не как в бутстрап расставлением кучи классов и созданием большой вложенности а результат это каша в разметке.
Но БЭМ это другое. Между прочим он идеально сочетается с возможностями препроцессоров!

У сожалению у вас получилось как в анекдоте.
- Гоги, тебе нравиться Шакира?
- Нет
- А где ты ее слышал?
- Мне Моги напел

Вам доказывали какую-то чушь, выдавая ее а БЭМ. А потом удивляешься, почему люди БЭМ не любят. Да вот такие умники своим бредом пугают людей, а те в свою очередь думают что это на самом деле БЭМ.

Сожалею о вашем таком неудачном знакомстве с очень хорошим и мудрым изобретением.

Answer 6

[Олег]

БЭМ вносит порядок в код, что уже отлично, позволяет переиспользовать различные части кода. Что касается вашего примера, это конечно перебор, я думаю от бэма здесь только наименование, хотя у меня тоже бывает встречаются блоки, у которых может быть несколько модификаторов, и соотвественно простыня классов, но это удобно на самом деле. Вам как back-end - щику должно быть до лампочки 2 класса у кнопки или 4, скопировать и вставить, фронт частью должен заниматься другой человек, что касается движков, то это скорее проблема движка, если на него нельзя натянуть любой HTML код, имхо.

Comments

[Alexander]

да неее ))) мне как бекендщику у которого кредо писать чистый и лаконичный код, сложно на психологическом уровне )))

Answer 7

[Максим Афанасьев]

Сижу читаю, угораю ))) Уж насколько у нас хотят все упростить до невозможного и все равно найдут в трех буквах скрытый заговор внеземной цивилизации )
Блок - Элемент - Модификатор ... все... Это и есть БЭМ, а именно то как они "сношаются" и в каких "позах" - так четче будет чем про подчеркивания )
Методология - это путь к просветлению, постоянное желание и стремление к совершенствованию. Понять его метоБЭМ можно только когда понимаешь, что ты не тупо тычешь в клаву, чтобы рамка не уехала, а делаешь Быстро, Четко и Правильно - Быстрый, Четкий и Правильный продукт. Когда через полгода тебя просят допилить что-то и ты не втыкаешь полдня в код, чтобы понять как ты сам же (полгода назад) все это с "наследованием" и с "6-ю классами" так резво навернул, и еще оставшуюся часть дня ловить баги по всему сайту (хотя мне кажется - это не про автора).
В заметку для ТС: оно тебе и правда не надо, раз ты к этому пришел только для того, чтобы свои убеждения закрепить - эт один.
Лаконичность где? Блок-Элемент - вот она! это 2 слова, 12 символов. И поверь то, что они делают намного лаконичнее чем написать кучу кода в миксин, потом держать все это в голове и вызывать, отлаживать, и так далее и тому подобное.
И для бэков - Вы тоже чО гОНИТЕ??? ))))) (без обид)) Не нравиться вам строчка длинная, а то, что для вызова того же { .on('click', ... ) } в проект грузится несколько сотен строк кода мы почему молчим?) - непорядок ).

И в итоге - все мы умные, все мы все знаем, а я рою инет и если честно не вижу реализации "ноу-хау" в достаточных масштабах. Все везде кривое, косое и только где-то (очень изредка) видна начальная идея реализовать все по уму.

Answer 8

[Андрей К]

По-моему, как раз для бэкендщиков и понятен БЭМ, это в принципе единственная здравая идея из тех, что есть на фронте!!!
Потенциально ещё есть WebAssembly, чтобы убрать ГовноСкрипт, но это пока перспективы.

Верстальщика нужно выпороть... и пороть до тех пор, пока не научится.

У БЭМ есть только одна проблема, и ваш случай не редкий, люди вообще не понимают по причине массовой тупости.

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