Методология БЭМ. Теория + пример 

Вот интересно: изучая верстку, какие-то моменты не догоняешь и спустя время, после большой практики за плечами, эти моменты отлично устаканиваются в голове. Я когда пару лет назад пытался верстать вместе с Максом, мне было очень сложно (начинал верстать - бросал, куча классов, не понятно для чего, сборка gulp, с которой непонятно, как работать). Зато на сегодняшний день, Макс - самый актуальный для меня учитель по web-разработке. Набрался опыта и теперь понимаю все, о чем он рассказывает.

Смотрел когда-то много роликов на эту тему, было не сразу всё понятно! Спасибо Вам, что собрали в этом коротком видео всю основу, которую не сложно понять и применять в дальнейшем! Всё понравилось, лайк!

Благодарю тебя за весь этот труд! Очень интересно и как раз в тему) Много моментов по верстке, которые хотел подтянуть) Так держать)) Только ЛАЙК!

Ахахах)) "очень удобно, очень круто... это очень очень легко и просто...это вообще супер просто, мне кажется")) Рассмешил, люблю как ты объясняешь все

Спасибо освежил в памяти, методологию )

Такой подход к именованию очень понятный и логичный, спасибо )

Всё прекрасно понятно, спасибо вам большое!

Поддержим лайкосиком отечественного производителя)) xD

Спасибо! Очень доступно

Спасибо тебе, добрый человек!

Отличное объяснение!)

Сколько смотрел видосов про бэм , не было так понятно как после этого. Спасибо

Благодарю!

Самое внятное объяснение, что я встречал. Спасибо ! Пойду дальше вёрстку курить =)

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

Спасибо большое. Я в начале пути и очень хотел разобраться с классами, а то путаницы много было в разных курсах. Разобрался)

Спасибо за ролик.

"она наша"... Ну хоть что-то )) Благодарю за объяснение!

Спасибо!

спасибо за качественную информацию) кстати, голос так похож на гудвина, или это просто мне кажется)

Максим, не планируешь по настройке gulp снять мануал? Посмотрел бы с удовольствием от тебя.

Молодец! Ответил на все мои вопросы, что блок может быть вложен в другой блок и он остается отдельным компонентом и необязательно он должен быть элементом главного блока. А то все кричат, что блок если вложен в другой блок то он автоматически становится элементом, если микс - тогда да, но если не использовать микс - он тем же блоком остается и элементом быть не может, отдельный компонент. Спасибо большое! Правильно надеюсь понял? И единственный момент, какой я не понял. Вы на 8:05 секунде говорите, что элементы всегда слева, но при этом элементом написали справа, а слева title - это ведь блок а не элемент. Вот справа был элемент.

БЭМ понимает каждый по своему)

Спасибо за ролик. А можно ли по бэм использовать 2 блока в классе? Т.е., например: Или тут второй класс обязательно должен быть элементом?

Максим, как ты думаешь, как все-таки правильно обучаться верстке? Вот можно проходить разные курсы. Выучить основы HTML, CSS, JS для верстки. Но по факту после этих курсов знаешь только основы, т.к. на таких курсах довольно часто для обучения используются простые макеты. А чуть попадается что-то нестандартное, так сразу затыки возникают с тем, как правильно это реализовать. Вот забацал бы кто-то библиотеку самых популярных блоков для сборки макетов с разбором того, как эти блоки правильно верстать. Я бы с удовольствием приобрел такую библиотеку с разбором верстки )) Допустим, какие-то блоки с разбором верстки можно было бы выложить в общий доступ на канале для затравки. А какие-то блоки посложнее и поинтереснее можно было бы уже купить за денежку. Ну или за денежку можно было бы продавать исходники верстки. Тут уже можно было бы продумать, как лучше монетизировать такие знания. Факт в том, что подобной библиотеки с разбором верстки популярных блоков я пока еще нигде не видел. Можно было бы тупо брать интересные и актуальные идеи оформления блоков в маркетплейсах шаблонов и пилить обучающий контент о том, как можно реализовать что-то подобное ) Можно, конечно, на Ютубчике найти какие-то обучалки по реализации каких-то фишек. Но в виде одной большой библиотеки блоков для верстальщиков да еще и с разбором верстки я подборок еще нигде не видел. Как думаешь, Максим, была бы такая библиотека востребована и интересна тем, кто изучает верстку? Чтобы все было в одном месте и чтобы можно было выбрать и научиться делать именно тот элемент сайта, который тебе сейчас нужен?

Спасибо за ролик! Делайте шрифт побольше, очень плохо видно!

Когда я хочу стереть название элемента или модификатора с помощью ctr + backspace, то стирается полностью и имя элемента/модификатора и имя блока отделённое нижним подчёркиванием. Через тире - такого не происходит, но методология правда удобная, и хотелось бы спросить опытного человека, не знает ли он есть ли какая-нибудь настройка позволяющая отключить стирание слова через __?

А что у вас за сайт в конце ролика можна ссылку на видео пожалуйста. Хочу потренироваться вместе с вами. ;)

На мой взгляд крайне важно использовать БЭМ везде. Ибо в приведенном примере есть места, где БЭМ смешивается с применением каких-то непонятных классов, которые по сути не имеют отношения к методологии. Так например несколько вводит в недоумение набор классов "container header__container flex". С логической точки зрения понятно, что и как тут сделано, но если уже придерживаться какого-то конкретного подхода, то делать это полностью, а не иногда. Что собой представляет класс flex? Это модификатор? Если да, то почему проименован класс не по схеме "блок- -модификатор"? Если это блок, то зачем сего смешивать еще с двумя другими блоками? 3 микса в одном блоке это уже чрезмерное и ненужное усложнение. Блок + 1 микс всегда будет достаточно, а там где недостаточно надо вводить дополнительный DOM узел. Также ни слова не сказано про внешнюю геометрию, что является основой БЭМ наряду с правилами именования...

Приветствую. Познавательно, но не совсем понятно те блок элемент и модификатор надо условно в 3 фразы прописывать? Далее вопрос про css каких свойств не должно быть у блоков? Можно ли в css обращаться в ложенности элементов типа nav li a {}? Можно ли в css обращаться к блоку через nthchild и ему подобным? Заранее спасибо

Я вот кстати когда учился верстать , думал нафиг этот бэм нейминг, думал типо пипец там длинные классы , мусор в html. Когда изучил понял что это просто пушка , идея ваще огонь. И даже со специфичностью css париться не надо. Умно и просто.

п.с. если хотите сказать спасибо ! писать нужно более 7 слов для продвижения видео ! и лайкать чужие комменты ! !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! всем удачи! видео круть !

А вот допустим, у меня есть хедер, который делиться на верх и низ и допустим и сверху и снизу есть какое-то лого, как правильно по бэму назвать логотипы сверху и снизу?)

Не совсем понял, чем БЭМ отличается от обычного CSS? в синтаксисе используется "__" , "--" - этот синтаксис проверяет браузер или это сугубо для читаемости кода? на 6:57 - почему нельзя? не будет работать или также для читаемости?

А можно ли указывать элементам разных блоков один и тот же модификатор ?

Неожиданно голос препода узнал.

А подскажите мне пж, зачем писать цвет т.е title__span_red? Мы тут выходит в хтмл строго задаём цвет, это значит что если мы захотим изменить цвет span на green то нам придется заменять не только css этого класса но и html во всех местах и в js Разве это не костыль? Разве не лучше написать title__span_different_color

А зачем миксы , разве это не тоже что сделать модификатор? Например навесил модификатор для центрирования заголовка и вышло тоже самое

Я вот не понял, вроде вы сказали, что для каждого блока свой файл, а у вас блок social находится в файле header. Или я не так понял?

Еее, меня учит БЭМу молодой Ларин(без каких либо обид, голос похож)

Ларин?

Всем мир! Я изучаю css. И к сожалению у меня нет знакомых разработчиков или тех, кто тоже учится программировать. Мне очень интересно писать код и говорить об этом. Поэтому хочу себе круг людей который как-нибудь связаны с этим). Напиши если тоже хочешь)

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

Смотрел ваши видео по разбору и заметил, что вы не одобряете следующую разметку по БЭМ : Я имею ввиду класс _container и нижнее подчеркивание перед ним. Если его убрать, это будет означать объявление нового блока и если следовать логике БЭМ, именовать вложенные в него элементы мы должны уже от его имени : Разве не так ?

А разве миксины не используются для определения положения блока (margin...), а описание свойств блока заключается в соответствующем классе. Какой-то неправильный у Вас БЭМ получается, модификаторы записываются в миксины. Зачем?

ни черта не понял, чем это все отличается от всего того, что существовало до появления Яндекса на планете.

У всех бем разный я не понимаю как его учить когда он в каждом видео разный. Зачем он вообще нужен.

+++++++++++

Невнятно, быстро.