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

Подписаться 20 тыс.

Просмотров 10 тыс.

50% 1

✏️ Разбираемся что такое БЭМ методология и зачем она нужна. Знакомимся с компонентным подходом, сущностями блок, элемент и модификатор и на практике применяем БЭМ-методологию для написания разметки.
🔴 Timeline:
▶ 00:00 | Введение
▶ 00:24 | Общая информация
▶ 01:00 | БЭМ-блок
▶ 02:11 | БЭМ-элемент
▶ 03:12 | БЭМ-блок и БЭМ-элемент одновременно
▶ 04:15 | БЭМ-модификатор
▶ 05:57 | Разбор макета
▶ 08:30 | Почему БЭМ
▶ 09:31 | Заключение
📚 Ссылки:
➖ Официальная документация по БЭМ методологии: ru.bem.info/methodology/
➖ Макет из примера: www.figma.com/file/racHPrMNd7...
💬 Чат в телеграмме (помощь новичкам):
t.me/friendlyFrontendChat
🔸 Boosty (поддержать канал):
boosty.to/friendly-frontend
🗂️ Бесплатные курсы на канале:
🟠 HTML: • HTML курс 2024
🔵 CSS: • CSS курс 2024
🟡 JS: • JavaScript курс 2024
🟢 A11y: • Accessibility курс 2024
⚪️ Мастер-класс по верстке для новичков: • Верстка Kropp Fitness ...
🔘 Мастер-класс по верстке для продвинутых (БЭМ, SCSS): • Верстка Positivus (HTM...
🗺 Frontend Roadmap 2024 • Frontend Roadmap 2024 ...
📌 Автор:
➖ Личный сайт: aleksanderlamkov.ru/
➖ Telegram: t.me/friendlyFrontend
➖ Boosty: boosty.to/friendly-frontend
➖ GetMentor: getmentor.dev/mentor/aleksand...
➖ Solvery: solvery.io/mentor/aleksanderl...
#frontend #фронтенд #бэм

Опубликовано:

8 май 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 92

@AleksanderLamkov 4 месяца назад

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

@DemiUA Месяц назад

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

@brahners3 4 месяца назад

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

@easycad6998 4 месяца назад

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

@denichi872 3 месяца назад

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

@AleksanderLamkov 3 месяца назад

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

@Catcher-RP 3 месяца назад

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

@NeoCoding 2 месяца назад

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

@unlimitedgames8357 4 месяца назад

Спасибо🎉

@user-fw3on5ih3q Месяц назад

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

@alexb.2616 4 месяца назад

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

@ilyatemnikov9624 Месяц назад

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

@andreo5027 4 месяца назад

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

@MaxMatlakov 4 месяца назад

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

@virtuoz-ru 4 месяца назад

Хорош 👍

@ourdestruction6851 2 месяца назад

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

@vitaliydurov 4 месяца назад

❤

@27FeetUnder 4 месяца назад

Отличное и очень лаконичное описание БЭМа, спасибо 👍

@dazukioda8928 4 месяца назад

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

@user-xn2cr5oe4p 2 месяца назад

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

@dazukioda8928 2 месяца назад

крутой@@user-xn2cr5oe4p

@smotritelyoutube 4 месяца назад

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

@solvefixed 4 месяца назад

😍😍

@liza_beg 4 месяца назад

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

@user-xe4vj5tu1r 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

Привет! Спасибо :) Про семантику - на канале в курсе по HTML как раз был урок на эту тему: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-7ZZK9Iprw5c.html Либо можно глянуть мастер-класс лендинга Kropp Fitness, там большое внимание уделено этому вопросу.

@kalts_daniil 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@user-ks5wq4lm8e 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@user-ks5wq4lm8e 2 месяца назад

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

@soldaygames4347 2 месяца назад

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

@almannazyrov394 4 месяца назад

Есть вопросик на счёт нейминга. Вот есть 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 4 месяца назад

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

@almannazyrov394 4 месяца назад

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

@user-nn1gl3yf3j 15 дней назад

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

@AleksanderLamkov 15 дней назад

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

@TopTop-qg1oj 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@illiabulgakov2013 29 дней назад

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

@Resident6037 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

Привет! Я бы предложил ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-GNrdg3PzpJQ.htmlsi=Oo8riMAfQa9FlOLk и, вероятно, ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-kz23xxukY5s.htmlsi=oiUWDh517q2FLPRI. Первый - смотрел лично, очень хорошо всё объясняется.

@user-jm4ht5dz8g 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@TopTop-qg1oj 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@WebASMR001 3 месяца назад

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

@svitboomer8840 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@stazyxtnom4514 4 месяца назад

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

@Ivanfwit 2 месяца назад

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

@sartjhon3300 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@sartjhon3300 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@sartjhon3300 4 месяца назад

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

@user-do3or8jr7v 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@user-do3or8jr7v 2 месяца назад

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

@user-do3or8jr7v 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@user-do3or8jr7v 2 месяца назад

@@AleksanderLamkov Спасибо

@carry-on-chaos4032 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@carry-on-chaos4032 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@carry-on-chaos4032 4 месяца назад

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

@carry-on-chaos4032 4 месяца назад

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

@user-fd5le5bx9j 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@user-fd5le5bx9j 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@user-zj1nn8zj8f 4 месяца назад

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

@AleksanderLamkov 4 месяца назад

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

@egorrublev5529 4 месяца назад

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

@user-ed5zh5sl3s 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

Совсем нет.

@NeoCoding 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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

@NeoCoding 2 месяца назад

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

@AleksanderLamkov 2 месяца назад

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