kentuck1213
@kentuck1213

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

Мне как back-end - щику трудно ужиться с этим БЭМ - ом. Зачем БЭМ когда есть SASS/SCSS/LESS. Недавно мне нужно было сажать верстку на движок и, вот что я увидел при первой стр. :
<button class="custom__button black__button login__forgot reg__button right__part mob-full__width">
create an account
</button>

1611b4ad33a64584b1707eded5cd3e74.png
Кнопка простая, background да color.
Шесть классов для простого button в регистрации. У меня код в IDE от JetBrains уходит далеко за белую полосу. На вопрос верстальщику что это такое: "Это бэм, я использую один стиль несколько раз и т.д". Долго спорили, почему ты не можешь через родителя добираться к дочернему элементу ? где лаконичность ? где миксины ? почему ты не делаешь наследовать классов в своем SCSS ?. А когда просматривал код через панель разработчика то увидел настоящие MMO RPG PVP битву, зуб за зуб, стиль за стиль, по 3 раза все перебивается. Так по мне БЭМ это вообще огромный костыль а не методология.
  • Вопрос задан
  • 2217 просмотров
Решения вопроса 6
class="custom__button black__button login__forgot reg__button right__part mob-full__width"

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


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

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

БЭМ - Это больше масштабируемость а уже потом лаконичность. Забудьте про селекторы (только если они действительно нужны).
А когда просматривал код через панель разработчика то увидел настоящие MMO RPG PVP битву, зуб за зуб, стиль за стиль, по 3 раза все перебивается
Это криворукость разработчика. БЭМ тут ни при чем.

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

А вообще в вопросе у тебя говнобём а не БЭМ.
Ответ написан
dom1n1k
@dom1n1k
От БЭМ-а тут только двойные подчеркивания. Тут вообще всё неправильно.
Ответ написан
Комментировать
Wolfnsex
@Wolfnsex Куратор тега Веб-разработка
Если не хочешь быть первым - не вставай в очередь!
Мне как back-end - щику трудно ужиться с этим БЭМ - ом.
Вам это совершенно не обязательно делать.

Зачем БЭМ когда есть SASS/SCSS/LESS.
Что-то из серии "Зачем мне холодильник, если я не курю", ну вы понимаете... :)

Шесть классов для простого button в регистрации.
Такого эффекта можно добиться и без БЭМ.

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

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

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

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

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

P.S. Я не однократно встречал т.н. "БЭМ" код в проектах, где он вообще ни в какую не упёрся, но этом обусловлено не тем, что "БЭМ плохой", а тем, что верстальщик не может принимать оптимальных решений. Это выглядело как если бы, человек научился пользоваться пассатижами и побежал бы ими делать "всё", и колоть орехи и забивать гвозди и снимать кастрюлю с плиты, что бы не обжечься.
Ответ написан
Комментировать
GriNAME
@GriNAME
Front-End Developer, Android Developer
Столько комментов и добавить то нечего)
БЭМ это модульность. Каждая верстка это словно создание фреймворка наподобие бутстрап. Если лендинг секций на 10 к примеру верстаешь, то сверстал по БЭМ секции 2-3 а дальше только классы расставляй готовые и иногда модификаторы добавляй. Или многостраничник, основные элементы сверстал и так же только классы расставляй, стили уже готовы.

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

menu__link_active
card_shadow
button_red
section__title_blue

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

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

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

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

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

И в итоге - все мы умные, все мы все знаем, а я рою инет и если честно не вижу реализации "ноу-хау" в достаточных масштабах. Все везде кривое, косое и только где-то (очень изредка) видна начальная идея реализовать все по уму.
Ответ написан
Комментировать
@kuftachev
По-моему, как раз для бэкендщиков и понятен БЭМ, это в принципе единственная здравая идея из тех, что есть на фронте!!!
Потенциально ещё есть WebAssembly, чтобы убрать ГовноСкрипт, но это пока перспективы.

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы