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

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

@maxgraph

3 жыл бұрын

Ахаха

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

@maxgraph

3 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

Спасибо)

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

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

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

@user-is9yv2gl3n

3 жыл бұрын

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

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

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

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

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

@maxgraph

2 жыл бұрын

Пожалуйста)

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

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

Благодарю!

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

@maxgraph

Жыл бұрын

Пожалуйста)

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

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

@maxgraph

2 жыл бұрын

Пожалуйста)

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

@maxgraph

3 жыл бұрын

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

Спасибо!

@maxgraph

Жыл бұрын

Пожалуйста)

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

@maxgraph

4 жыл бұрын

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

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

@maxgraph

Жыл бұрын

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

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

@maxgraph

3 жыл бұрын

Можно))

@user-ne4ez4sd8c

3 жыл бұрын

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

@user-or1hy4xz8u

Жыл бұрын

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

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

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

@maxgraph

Жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

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

@user-jf8sz7zz4t

2 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

@ZXprSL

3 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

@deniskhasanov8296

3 жыл бұрын

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

@maxgraph

3 жыл бұрын

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

@deniskhasanov8296

3 жыл бұрын

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

@deniskhasanov8296

3 жыл бұрын

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

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

@maxgraph

Жыл бұрын

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

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

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

@maxgraph

4 жыл бұрын

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

@user-tt3hr1pn9d

4 жыл бұрын

С 1.11

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

@maxgraph

3 жыл бұрын

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

@RainbowJet1

3 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

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

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

@maxgraph

3 жыл бұрын

Это да))

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

@maxgraph

4 жыл бұрын

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

@PalyufishkuRuSite

4 жыл бұрын

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

@maxgraph

4 жыл бұрын

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

@PalyufishkuRuSite

4 жыл бұрын

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

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

@maxgraph

2 жыл бұрын

Хех)

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

@maxgraph

3 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

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

@maxgraph

9 ай бұрын

Ахаха

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

@gphest

Жыл бұрын

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

@gen1us421

Жыл бұрын

@@gphest geen1uss

Ларин?

@maxgraph

Жыл бұрын

?

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

@maxgraph

3 жыл бұрын

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

@ktytar

3 жыл бұрын

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

@maxgraph

3 жыл бұрын

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

@ktytar

3 жыл бұрын

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

@maxgraph

3 жыл бұрын

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

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

@maxgraph

4 жыл бұрын

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

@user-eq5rm5nh4h

4 жыл бұрын

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

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

@maxgraph

2 жыл бұрын

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

+++++++++++

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

@maxgraph

2 жыл бұрын

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

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

@maxgraph

3 жыл бұрын

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

@user-di3qe7xj9q

3 жыл бұрын

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

@maxgraph

3 жыл бұрын

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