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

[@Lok1goD]

Бро! ТЫ лучший! Отличная подача, всё ясно\понятно. Смотрю все твои видео! Продолжай пожалуйста!

[@luxarmiger5729]

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

[@MegaRain88]

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

[@maxgraph]

Пожалуйста))

[@nnnabbot]

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

[@pobistrey]

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

[@AnnaCherkesova]

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

[@maxgraph]

Ахаха

[@RomanKhassazhirov]

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

[@alecherkas9633]

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

[@alex-kobrin]

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

[@alextopsite]

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

[@maxgraph]

Почему? Следуйте правилам и все

[@nadinelive]

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

[@Anatoli-bq1pe]

Благодарю!

[@Kot_off]

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

[@tonit2237]

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

[@maxgraph]

Спасибо)

[@MarkoTH000]

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

[@maxgraph]

Пожалуйста)

[@romanchernyshov2632]

Спасибо!

[@maxgraph]

Пожалуйста)

[@PalyufishkuRuSite]

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

[@ПАУК-о2я]

та вроде логичный, но нихера не понятный

[@VladimirSalygin]

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

[@maxgraph]

Пожалуйста)

[@ОлегЗайцев-и6б]

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

[@maxgraph]

Я про то, что сам текст по умолчанию будет слева) а с помощью services__title сделали другой заголовок по центру)

[@ПанЧиЛо]

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

[@maxgraph]

спасибо за отзыв) рад помочь)

[@Rusya_Face]

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

[@maxgraph]

Пожалуйста)

[@custercuster4918]

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

[@maxgraph]

Не знаю кто это))

[@AllesKaput]

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

[@lisofsky8151]

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

[@ZXprSL]

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

[@maxgraph]

Бэм - это лишь правила именования, используется все тот же язык css) но классы называются по особому

[@ZXprSL]

@@maxgraph , спасибо, уже разобрался :)

[@llwebstylell242]

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

[@maxgraph]

Это да))

[@L.O.S-u7v]

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

[@L.O.S-u7v]

Нашол у вас на канале . Буду учиться спасибо.

[@nickiminaj0882]

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

[@maxgraph]

Нет, это не костыль, а как раз преимущество бэм)

[@user-ne4ez4sd8c]

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

[@maxgraph]

Можно))

[@user-ne4ez4sd8c]

Благодарю за ответ) Просто часто вижу как миксуют блоки с элементами или модификаторами, но ни разу не видел, чтобы миксовали блок с блоком)

[@ДмитрийНормов-ю6ц]

@@user-ne4ez4sd8c у многих "гуру" БЭМ свой, как правило, урезанный..

[@k.safonov]

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

[@maxgraph]

Не вижу никаких проблем с классом flex, но вашу точку зрения понял, спасибо

[@detro1821]

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

[@maxgraph]

Главный лого, второстепенный лого

[@deniskhasanov8296]

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

[@maxgraph]

Не понял первый вопрос, здравствуйте. По поводу свойств у блоков - не должно быть тех, которые влияют на соседние элементы (маргины например). nth-child - можно вложенность - нельзя, разве что для определенных мелочей, типа "сделать все ссылки в блоке хедера отличными от всех ссылок блока футера, при том что у блоков хедера и футера один класс-блок".

[@deniskhasanov8296]

По поводу первого вопроса например header-header header-header__logo header-header__logo--red условно получается 3 фразы блок элемент модификатор.

[@maxgraph]

Да, только это не у одного элемента)

[@deniskhasanov8296]

Сколько может быть элементов у родительского блока?

[@deniskhasanov8296]

Или внутри этого блока можно создать другой блок согласно влоденности бэма?

[@RainbowJet1]

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

[@maxgraph]

Нет, это уже не по правилам будет

[@RainbowJet1]

@@maxgraph понятно, значит делать отдельный класс)

[@slite_media26]

Не ты ли случайно ввёл канал у сабатовского про коррекцию цвета, что то очень похож голос :)

[@maxgraph]

Нет)

[@x0mek638]

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

[@maxgraph]

Затем, что можно)

[@crazyhippo9191]

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

[@maxgraph]

Планирую, в июне думаю будет

[@ОлегПетров-п4у]

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

[@ktytar]

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

[@maxgraph]

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

[@ktytar]

@@maxgraph Автор подразумевает, что _container это 'технический' класс, а нижнее подчеркивание дает возможность не нарушать именование и далее строить дерево БЭМ от родителя, как в первом варианте. Как по вашему мнению верно ?

[@maxgraph]

То как я говорю никаких правил не нарушает Про технические классы в бэм я не видел ничего))

[@ktytar]

@@maxgraph Спасибо. Теперь я запутался еще больше ))

[@maxgraph]

Просто не используйте _container)

[@PalyufishkuRuSite]

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

[@maxgraph]

на курсах есть очень даже нестандартные макеты :) А вообще - практика и еще раз практика + нужен наставник (ну или кто-то вроде него), который сможет оценить работу. Насчет библиотеки - идея неплохая, но реализация ее довольно сложная, ведь вариантов таких блоков огромное кол-во. Я уже думал на канале сделать рубрику - берем макет интернет магазина, вырываем из него какие-то кусочки и верстаем. Но пока не знаю, будет ли это)

[@PalyufishkuRuSite]

@@maxgraph Понимаю, что реализация такой библиотеки вещь довольно сложная ) Можно было бы начать создавать библиотеку с каких-то базовых, относительно стандартных блоков. А потом уже можно было бы по мере возможности добавлять что-то поинтереснее ) Или еще вариант ) Можно было бы замутить некое сообщество верстальщиков, чтобы общими усилиями формировать такую библиотеку. Чтобы каждый желающий мог внести какой-то свой вклад ) Было бы вообще супер ))

[@maxgraph]

Тут нужно увидеть вашу идею более детально) может, покажете, что конкретно имеется ввиду?)

[@PalyufishkuRuSite]

@@maxgraph Вот тут описана идея habr.com/ru/post/208818/ , только применительно к документации MODX. Если бы замутить на основе этой идеи библиотеку блоков для верстки, которую моли бы пополнять все желающие участники сообщества, было бы прикольно! ;)

[@ezgame5621]

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

[@maxgraph]

Хех)

[@РусРус-и9п]

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

[@maxgraph]

Я рассказывал только именование кассов

[@РусРус-и9п]

С 1.11

[@russinterview]

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

[@gphest]

Привет дай свой тг

[@russinterview]

@@gphest geen1uss

[@MARYUSSA]

Ларин?

[@maxgraph]

?

[@besspeshny]

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

[@maxgraph]

Ахаха

[@RainbowJet1]

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

[@maxgraph]

Класс или делать его элементом

[@ДенисКуликов-м3о]

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

[@maxgraph]

какие еще миксины? где вы их увидели?)

[@ДенисКуликов-м3о]

@@maxgraph 8:20 не знаю как это назвать правильно

[@offilawnoone9020]

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

[@maxgraph]

Не обязательно должно отличаться)

[@johnyxmelev5475]

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

[@maxgraph]

БЭМ нужен для удобства. С ним вы можете создавать целые структуры блоков, и легко переиспользовать. + у вас не будет проблем с именованием никогда

[@user-pf9wz2ik2r]

+++++++++++

[@АлексейУставщиков-х6в]

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

[@maxgraph]

Буду улучшать, спасибо)

[@АлексейМакедонский-у3ж]

@@maxgraph Всё равно спасибо большое. Мне хотелось увидеть параллельно пример в css Почувствовать связь и запомнить. Можно было сделать в конце небольшую но подробную практику. Я почти новичок и очень важно не поднимать шторм в голове. Но усердие в уме нужно. Можно дополнительно выпускать закрепительное видео с практикой.

[@maxgraph]

Учту) благодарю. Но вообще я на марафоне интернет магазина делаю бэм, можете глянуть