БЭМ методология за 10 минут | Основы для начинающих

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@DemiUA]

Великолепная подача. Конкретные формулировки. Искал контент по методологии БЭМ и попал на этот ролик - более, чем доходчиво и понятно. В конце просмотра ролика, подписался на канал с полными уведомлениями - такой контент надо сберегать, на просторах ютуба он - редкость. Автору: ОТЛИЧНО! 💪💪💪

[@elenabeschastnaya6852]

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

[@AleksanderLamkov]

Спасибо за поддержку! ☺️

[@easycad6998]

Я вообще не понимаю как он так быстро и структурированно говорит, не думаю что читает или так заранее видео проработал. Но сразу видно талантливый человек....

[@denichi872]

снял, нарезал видео, ускорил запись

[@AleksanderLamkov]

Нет, это мой обычный темп речи :) Зачем ускорять? Это было бы странно.

[@Catcher-RP]

@@AleksanderLamkov объясню почему все думают что видео ускорено. Обычно все ролики на ютубе ставят на скорость 1.25, чтобы быстрее просмотреть его, а данная скорость не сильно искажает речь. В этом же видео, если поставить скорость 1.25, то речь кажется слишком быстрой и неразборчивой. Потому люди думают, что видео уже было ускорено в 1.25 раза на стадии монтажа.

[@NeoCoding]

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

[@mouri_san]

те же мысли, поражаюсь

[@den7017]

Смотреть до конца! Очень хороший подход подачи материала, коротко по сути и переход к практике, где всё сразу становится ясно! Спасибо огромное автору!

[@NikitaTen-z8j]

Крайне недооцененное видео!!! Спасибо за пример с Saas препроцессором в конце. Супер помогло!

[@AnnaGuillet-v5o]

Спасибо огроменное! Наконец-то понятно стало. Золотое видео.

[@slamedesign]

Верстал в css и html всю жизнь, как самоучка с 2019 года, почему я раньше тебя не увидел на ютубе. Искал ролик, а нашёл золото, я в шоке.... Здоровья тебе на долгие годы вперед, Александр, самый топовый фронтендер (на ровне с Фрилансером по жизни)

[@maximusyusumi6035]

Согласен. Жека и Саня - лучшие преподаватели!

[@rastastafer]

@@maximusyusumi6035 Здравствуйте! Можете подсказать настолько же хороший канал, но про бэкэнд?

[@dazukioda8928]

Самое простое и понятное объяснение БЭМ методологии, что я видел

[@Ochenopasniy]

Самый фейковый коммент, что я видел

[@dazukioda8928]

крутой@@Ochenopasniy

[@brahners3]

Огромное спасибо за твои видео.

[@andreo5027]

канал с большим потенциалом

[@MaxMatlakov]

Очень жду про DOM элемент

[@ДмитрийГлотов-ь8х]

Все по делу и с премерами 👍

[@ourdestruction6851]

умничка, отлично объяснил

[@PavelChupryna]

Спасибо за работу!

[@smotritelyoutube]

Супер, вот теперь стало реально понятнее)

[@soldaygames4347]

Вообще нет слов, круто по полочкам все разложил, спасибо огромное однозначно подписка и лайк 😎😎😎😎🔥🔥

[@alexb.2616]

Крутяк. Спасибо!!!!

[@unlimitedgames8357]

Спасибо🎉

[@ilyatemnikov9624]

Спасибо, супер!!

[@NIkFreedomForce]

Спасибо, Александр! Расскажи еще про свой сетап) микро, звуковую, шумил комнату, нет)

[@AleksanderLamkov]

Привет! Микрофон Shure SM7B, внешняя звуковая карта Steinberg UR22C. С комнатой ничего не делал, динамический микрофон улавливает только ближайший звук, даже речь в метре от него уже будет не слышна :)

[@NIkFreedomForce]

@@AleksanderLamkov Понял, спасибо большое!) Заметил, ты обрезаешь свое дыхание, и записываешь фразы только на одно вдохе😁 это делаешь для уменьшения времени видео? Получается сумбурно, потому, что информация плотная и валится потоком без естессвенных человеческой речи пауз)) я смотрю тебя на 0,75)))) естесственно скорости, а не водки)) но, спасибо, что решил делиться концентратом, без воды!)

[@AleksanderLamkov]

На самом деле я всё ещё экспериментирую с динамикой речи и монтажом. Но я учту этот момент в будущем. Это уже не первое мнение о том, что информация на такой скорости непросто воспринимается.

[@liza_beg]

Спасибо! Все очень понятно для новичка!

[@kalts_daniil]

Спасибо за урок! У меня несколько вопросов: 1) Когда использовать inner и wrapper? Я разницу не понял 😅 2) За чем создавать класс header__button и button--transparent? Почему нельзя добавить только button-trasnparent и button? Мне кажется 3 класса на одну кнопку излишне, ведь общие черты даст кнопка button, а прозрачной сделает ещё один класс. Я допускаю header__button, если кнопке надо ещё отступ добавить 🤔 3) Я правильно понял, что .container нужен исключительно для ограничения блока по ширине/высоте? А .wrapper для внутренних отступов 🤔

[@AleksanderLamkov]

Привет! 1. Иннер - внутренняя обертка, враппер - внешняя. 2. Для консистентности. Без этого класса внутри шапки не будет БЭМ-элемента кнопки, что странно. 3. Контейнер нужен и для ограничения ширины и для задания внутренних горизонтальных отступов, чтобы при сужении внутреннее содержимое не слипалось с краями экрана. Враппер я использую только, если требуются псевдоэлементы для элементов, которым из прописать напрямую нельзя (img, input, select). Враппер в классическом понимании (то, что можно увидеть у каждого второго верстальщика на ютубе) - это контейнер.

[@антонпампам]

Видео очень крутое. Только я не понял, зачем добавлять кнопке button класс button--transparent , если уже есть класс header__button с которым можно взимодействовать?такая кнопка только в header вроде.Буду признателен.

[@AleksanderLamkov]

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

[@антонпампам]

@@AleksanderLamkov понял, Спасибо за ответ.

[@Канекикун-у7ф]

Очень структурировано и доступно. Давно пишу разметку с использованием БЭМ и было очень приятно услышать качественное разъяснение. Будет ролик про разбор семантики?

[@AleksanderLamkov]

Привет! Спасибо :) Про семантику - на канале в курсе по HTML как раз был урок на эту тему: kzbin.info/www/bejne/bYu9fGx_pdeqa8U Либо можно глянуть мастер-класс лендинга Kropp Fitness, там большое внимание уделено этому вопросу.

[@Anatoli-bq1pe]

Благодарю!

[@Ivanfwit]

отличное видео, очень понятно, спасибо!

[@виртуоз_ру]

Хорош 👍

[@ДмитрийПримаков-к9с]

Сколько переизбыточности кода! Для каждого задавать class. Какой в этом смысл? Это выливается в лишние байты трафика. А если таких li не 5-10 штук, а сотни на странице, трафик страшно растёт. Страница будет весит 2 Мб, вместо условного 1 Мб!!

[@AleksanderLamkov]

Это вы ещё Tailwind и подобные ему библиотеки не видели…

[@egorrublev5529]

бэм от тебя ждали многие , всех нас можно поздравить))), щас ждём вёрстку посложнее и js

[@АлександрСальников-с2ж]

Коммент в поддержку

[@illiabulgakov2013]

Привет отличное видео, спасибо 👍👍👍 ПОЖАЛУЙСТА ПОМЕДЛЕННЕЕ ГОВОРИТЕ!!!!!!

[@TopTop-qg1oj]

видео супер!!!!!!как сделать чтобы нижние подчеркивания разделялись?

[@AleksanderLamkov]

Привет! В каком плане? Чтобы визуально можно было лучше отличить одинарное подчеркивание от двойного? Нужно шрифт в IDE поменять. У меня вроде JetBrains Mono стоит.

[@alman_harbi]

Есть вопросик на счёт нейминга. Вот есть header с классом header и у него внутри навигация nav.header__nav. Затем внутри навигации список. Можно ли список назвать nav-header__list если в навигации вставить второй класс (бэм блок) nav-header??? Пример: header.header nav.header__nav.nav-header ul.nav-header__list li.nav-header__item a.nav-header__link

[@AleksanderLamkov]

Привет! Можно, но конкретно в данном случае это излишнее усложнение.

[@OwezAtajanow]

👍👍👍

[@bubblesort6368]

Уже давно тревожит вопрос. Могу ли я использовать элементы родительского блока в методологии? То есть есть блок page и есть блок header. Можно ли внутри header написать page__element? Валидатор бэм онлайн вроде пропускает такую вёрстку, но меня смущает что это потенциально может создать проблемы переиспользования такого кода так как теперь блок header не самостоятелен и жёстко зависит от page. Нигде в доке я не нашел такого примера, но и запрета не видел. Буду благодарен за ответ.

[@AleksanderLamkov]

Можешь, но ты правильно подметил, что могут быть проблемы с переиспользованием кода. На примере такой разметки: ... Как можно улучшить этот подход, если в проекте не используется шаблонизатор разметки (нет деления всей разметки на файлы с разметкой конкретных компонентов)? 1. Используем классы БЭМ-модификаторов: ... .header--has-page-element .header__inner { background-color: blue; } .header__inner { background-color: red; } 2. Используем классы БЭМ-модификаторов и CSS-переменные: ... .header { --headerInnerBgColor: red; } .header--has-page-element { --headerInnerBgColor: blue; } .header__inner { background-color: var(--headerInnerBgColor); } А теперь подход в SPA (и там, где используется шаблонизатор разметки с возможностью передать компонентам пропсы): const Header = (props) => { const { innerClassNames = '' } = props return ( ... ) } const App = () => { return ( ) }

[@bubblesort6368]

@@AleksanderLamkov спасибо. По итогу это можно просто как анти паттерн рассматривать, хоть методология прямо не запрещает?

[@AleksanderLamkov]

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

[@aharito]

Вопрос был для меня интересен, поэтому напишу, хоть и не просили )) Для ответа я бы обдумал смысл данного БЭМ-элемента. То есть: если данный БЭМ-элемент `page__element` записан именно как элемент блока `page`, значит, он используется как внутри блока `header`, так и где-то вовне его, внутри блока `page`? Если да, то (возможно) имеет смысл сделать его блоком? ведь он переиспользуется в разных местах сайта. Если же нет (он используется только внутри блока `header`), то пусть и будет тогда эл-том блока `header`.

[@Resident6037]

Здравствуйте, можете посоветовать курсы или источники по React для новичков?

[@AleksanderLamkov]

Привет! Я бы предложил kzbin.info/www/bejne/fX_VlZpphd-jgLMsi=Oo8riMAfQa9FlOLk и, вероятно, kzbin.info/www/bejne/oauVZKuuqtCMa9Usi=oiUWDh517q2FLPRI. Первый - смотрел лично, очень хорошо всё объясняется.

[@skrepkaskrepka2173]

почему мы в лого использовали и блок и элемент, если вместо элемента по логике лучше подойдет специфический модификатор блока?

[@AleksanderLamkov]

Модификатор какой? Что он будет делать?

[@skrepkaskrepka2173]

@@AleksanderLamkov 3:14 header_ _logo сменить на header- -logo (если что это не претензия, я просто не понял, так как только учу)

[@AleksanderLamkov]

Нет, так нельзя. Модификатор для других целей должен использоваться.

[@ELVitaliy21]

❤

[@akylbekbaizakov]

👍

[@solvefixed]

😍😍

[@TopTop-qg1oj]

Можешь, пожалуйста, сделать обзор на свой VS,что у тебя добавлено

[@AleksanderLamkov]

Привет! У меня WebStorm. VSCode не использовал уже много лет. Про свои настройки IDE планировал сделать видео чуть позже)

[@alman_harbi]

быстро и чётка

[@ВладиславСереда-к4г]

Привет, а можно описывать элемент по селектору, а не по классу. Например, у меня есть блок .video и в нём всегда будет лежать только видео. Вот так можно описать .video video, с точки зрения BEM?

[@AleksanderLamkov]

Привет! Имеешь в виду использовать селектор по имени тега в БЭМе? Вообще, не желательно. Вся суть БЭМа сводится к единообразию «веса» селекторов, а этого можно достичь только, если все селекторы будут состоять из одного класса. И зачем делать лишнюю обертку над ? Можно ведь просто сделать .

[@WebASMR001]

Автору лайк. Только очень быстро говоришь

[@svitboomer8840]

Ну что же, когда там JS? Или какие планы остались ещё по CSS? SCSS?

[@AleksanderLamkov]

Привет! На днях видео по препроцессору стилей, на каникулах мини-курс по цифровой доступности для Frontend-разработчиков, затем ещё один мастер-класс по верстке по БЭМу с препроцессором стилей, а уже в феврале - курс по JS. Пока всё идёт по плану :)

[@ВиталийДавыдов-э4г]

Читал суждение, что именовение классов аналогично названию тега может вызвать какие-то не желательные последствия (например - ). Насполько оправдано данное утверждение или же это заблуждение?

[@AleksanderLamkov]

Это относится к не-семантическим и тегам, зачастую состоящих из 1-2 символов: a, p, h1-h6, b, u, s, ul, ol, li и так далее - такие имена классов действительно не очень хорошие. А вот header, footer, article, section, nav, aside - это хорошие имена классов к соответствующим тегам.

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Спасибо Александр

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov По БЭМ не рекомендуется обращаться на прямую к тегам. Стоит ли тогда вешать классы на body, html ? body с классом по моему будет выглядить странно...

[@AleksanderLamkov]

Не стоит, если речь не идет про модификации или состояния. Допусти, если нужно заблокировать скролл, я всегда на с помощью JS добавляю класс is-locked.

[@ВиталийДавыдов-э4г]

@@AleksanderLamkov Спасибо

[@hyperpocket.]

В чем разница модульного и компонентного подходов?

[@AleksanderLamkov]

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

[@sartjhon3300]

душный вопрос но все же. должен модификатор расширять или переопределять свойства?

[@AleksanderLamkov]

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

[@sartjhon3300]

@@AleksanderLamkov где то на просторах англоязычного интернета читал статью, что модифактор нужен для расширения. то есть мы создаем .button c общими стилями, а потом что то типа .button - - transparent, button - - white button - - accent и тд. считаешь это не совсем верным подходом? из-за возросшего кол-ва классов?

[@AleksanderLamkov]

Да, я думаю, что в таком случае чтобы сделать «дефолтную кнопку» придется лепить в разметке 3-4-5 классов и это не ок. Я всегда делаю «дефолтный компонент» в оригинальном селекторе БЭМ-блока, перечисляя внутри все свойства, которые мне нужны, а уже после, при необходимости, делаю модификации, где с бОльшей вероятностью я что-то буду переопределять.

[@sartjhon3300]

@@AleksanderLamkov благодарю

[@carry-on-chaos4032]

Кто-то еще пользуется этим в проде? Какие преимущества у бэм перед css модулями?

[@AleksanderLamkov]

Вынужден использовать модули, но только потому, что один проект - это библиотека компонентов, второй - монструозная экосистема, где черт ногу сломит, пересечения классов чреваты непредсказуемыми последствиями. Но будь у меня чистый проект с нуля, где точно нет и не будет никаких сайдэффектов по стилям прилетающих непонятно откуда, с удовольствием использовал бы БЭМ. Ну а если разрабатывается не SPA, а что-то проще, то БЭМ - всё ещё мастхэв. А если говорить про преимущества, то как минимум проще анализировать разметку в DevTools во вкладке Elements, если имена классов не состоят из рандомных хешей. Об этом никто не говорит, словно проблемы нет, но наверняка всем знакома ситуация, когда надо дебажить верстку в поисках бага «что-то едет и выглядит не как в макете», и дебажить проект с модульными стилями в таком случае - отвратительный опыт.

[@carry-on-chaos4032]

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

[@AleksanderLamkov]

Это я понимаю, у меня в библиотеке компонентов так вообще лишь осмысленный префикс добавляется без хешей, но всё равно читаемость страдает.

[@carry-on-chaos4032]

Просто мне тоже не особо нравится модули, больше нравится какой-то более абстрактный css писать. Вот думаю может с бэм будет удобнее

[@carry-on-chaos4032]

ещё говорят модули и общие классы не стоит комбинировать

[@RinatYouldashbaev]

Вы говорите: "БЭМ-элементы, как БЭМ-блоки, можно вкладывать друг в друга, допустима любая вложенность". Я понял, что можно писать: блок__элемент__элемент__элемент Но следующее предложение опровергает такое написание: "БЭМ-элемент всегда является частью БЭМ-блока, а не другого элемента"

[@AleksanderLamkov]

«Вкладывать друг в друга» имеется в виду про разметку. И высказывание, которое вы упомянули, не противоречит идее выше. Приведу пример: Когда у нас есть БЭМ-блок catalog, внутри него дочерний БЭМ-элемент catalog__body, а внутри этого элемента ещё один БЭМ-элемент catalog__list, то мы не говорим, что «БЭМ-элемент catalog__list является элементом элемента catalog__body», мы можем сказать только то, что «БЭМ-элемент catalog__list является элементом БЭМ-блока catalog».

[@МаксимПутютин]

@@AleksanderLamkov Согласен с Ренатом, сказанное противоречит. Только загуглив отдельно эти два предложения, понял что во втором речь идет о нейминге, а не о вложенности

[@AleksanderLamkov]

Спасибо за комментарий! В следующей версии этого видео использую иную формулировку в объяснении этого момента 🙂

[@dezibl100]

что за тема установлена ?

[@AleksanderLamkov]

Oceanic Dark Theme

[@stazyxtnom4514]

на скорости 0.75 значительно понятнее)

[@dimkinn1]

Да уж, обычно приходится ускорять, а тут аж замедлять, моск не успевает :)

[@easy-bot]

Если бы мне нужна была бы верстка то это единственный чел которого я бы замедлил что бы переворить инфу (если был бы новичков), но так как я знаю базово как работает верстка, то мне это не надо, я бэк.

[@alexdreamer11]

Очень познавательное видео. Только очень быстро тараторишь, пришлось на 0.8 скорости смотреть, а там качество теряется. Ты хоть паузы иногда вставляй.

[@AleksanderLamkov]

Привет! Учту :)

[@АлександрНиконов-и4ы]

похоже на tailwind, нет?

[@AleksanderLamkov]

Совсем нет.

[@NeoCoding]

я по природе эстет немного, и худшее что происходит во фронте (ну может кроме Tailwind css) это уродливая, но безусловно местами полезная вещь как БЭМ. Слава богу есть киллер фича в виде css модулей. Не рекомендую никому учить БЭМ.

[@AleksanderLamkov]

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

[@NeoCoding]

@@AleksanderLamkov а как же принцип каскадности? ведь БЭМ просто послал его, внедрив свою концепцию уникальных классов. У меня основная претензия в эстетической стороне наименования классов - двойное подчеркивание, одинарное, дефис.. классы становятся длинющими. по идее саму последовательность названий классов каскада в блоке как раз и можно представить в виде БЭМ, таким образом сохраняя уникальность и эстетику. Но тут уже личное дело каждого.

[@AleksanderLamkov]

Принцип каскада знать нужно, это факт. И новичкам сходу не нужно на БЭМ писать, это губительно. Нужно сначала помучаться с классическим CSS, чтобы понять "почему мой селектор не перебивает другой селектор". Я на канале как раз последовательно выпустил два мастер-класса по верстке. В первом - никакого БЭМ. Во втором - БЭМ и Sass, активно делил интерфейс на независимые блоки.

[@zalip4129]

сложно воспринимать когда рассказывают быстро.

[@AleksanderLamkov]

Слушай, а можно тебя попросить сравнить темп подачи с последними роликами на канале? Я старался прорабатывать этот момент. С момента выпуска этого видео про БЭМ, кажется, стало лучше. Как считаешь?

[@zalip4129]

@@AleksanderLamkov не обратил внимания что ролик из более давних. В новых роликах все у тебя отлично. Информация воспринимается очень хорошо.

[@fedorsany4]

Походу не для начинающих😮

[@AleksanderLamkov]

Привет! А что именно показалось сложным?

[@fedorsany4]

@@AleksanderLamkov сразу особенности применения без базы. И Не понятно как на практике применять

[@AleksanderLamkov]

Посмотри последний мастер-класс на канале, там всё на практике показано: kzbin.info/aero/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3&si=JITgUcpklw4we2aU

[@TheS68123]

BEM в 2024?) CSS-модули вам в помощь

[@AleksanderLamkov]

Почему нет? Это разные способы написания стилей для разных целей.

[@pschPvl]

Что мертво, умереть не может 😁

[@vikentustugo6769]

о, тут неудобные комментарии оказывается удаляют )) критика на этом канале не приветствуется

[@AleksanderLamkov]

О чем ты? Комментарии удаляет сам ютуб, если они содержат спам или мат. Если ты написал(а) что-то с таким содержанием, то попробуй переформулировать иначе.

[@vikentustugo6769]

@@AleksanderLamkov ни того, ни другого не было. ладно, продублирую, как помню. извини, видео не понравилось. просто зачитать инфу с официальной документации - это не урок. урок - это когда материал разжеван так, чтобы дошло до самых непонятливых. просмотрел минуты 4 и вынужден был искать официальную документацию. а вот там оказалось всё понятнее. и примеры там проще и доходчивей. а должно быть наоборот, урок должен быть понятней официальной документации, не правда ли?

[@AleksanderLamkov]

Ну, не всем подходит моя подача материала, это нормально.

[@Ochenopasniy]

Просто документацию зачитал…ну молодец парень👍

[@AleksanderLamkov]

В какой-то степени да, как же иначе. Ориентировался прежде всего на оригинальный источник.