БЭМ методология за 10 минут | Основы для начинающих
Вставка
- Опубліковано 31 тра 2024
- ✏️ Разбираемся что такое БЭМ методология и зачем она нужна. Знакомимся с компонентным подходом, сущностями блок, элемент и модификатор и на практике применяем БЭМ-методологию для написания разметки.
🔴 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 #фронтенд #бэм
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Смотреть до конца! Очень хороший подход подачи материала, коротко по сути и переход к практике, где всё сразу становится ясно! Спасибо огромное автору!
Великолепная подача. Конкретные формулировки. Искал контент по методологии БЭМ и попал на этот ролик - более, чем доходчиво и понятно.
В конце просмотра ролика, подписался на канал с полными уведомлениями - такой контент надо сберегать, на просторах ютуба он - редкость.
Автору: ОТЛИЧНО! 💪💪💪
Я вообще не понимаю как он так быстро и структурированно говорит, не думаю что читает или так заранее видео проработал. Но сразу видно талантливый человек....
снял, нарезал видео, ускорил запись
Нет, это мой обычный темп речи :) Зачем ускорять? Это было бы странно.
@@AleksanderLamkov объясню почему все думают что видео ускорено. Обычно все ролики на ютубе ставят на скорость 1.25, чтобы быстрее просмотреть его, а данная скорость не сильно искажает речь. В этом же видео, если поставить скорость 1.25, то речь кажется слишком быстрой и неразборчивой. Потому люди думают, что видео уже было ускорено в 1.25 раза на стадии монтажа.
на самом деле это очень большой талант так рассказывать и соображать. Не зря канал растет. Автор может не в курсе, но так могут единицы, и уверен автора ждет успех.
Спасибо за работу!
Огромное спасибо за твои видео.
Спасибо🎉
Все по делу и с премерами 👍
Спасибо, супер!!
канал с большим потенциалом
Очень жду про DOM элемент
умничка, отлично объяснил
Крутяк. Спасибо!!!!
Самое простое и понятное объяснение БЭМ методологии, что я видел
Самый фейковый коммент, что я видел
крутой@@user-xn2cr5oe4p
Отличное и очень лаконичное описание БЭМа, спасибо 👍
Хорош 👍
Супер, вот теперь стало реально понятнее)
❤
Спасибо! Все очень понятно для новичка!
Есть вопросик на счёт нейминга.
Вот есть 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
Привет! Можно, но конкретно в данном случае это излишнее усложнение.
быстро и чётка
Очень структурировано и доступно. Давно пишу разметку с использованием БЭМ и было очень приятно услышать качественное разъяснение. Будет ролик про разбор семантики?
Привет! Спасибо :)
Про семантику - на канале в курсе по HTML как раз был урок на эту тему: ua-cam.com/video/7ZZK9Iprw5c/v-deo.html
Либо можно глянуть мастер-класс лендинга Kropp Fitness, там большое внимание уделено этому вопросу.
Спасибо за урок! У меня несколько вопросов:
1) Когда использовать inner и wrapper? Я разницу не понял 😅
2) За чем создавать класс header__button и button--transparent? Почему нельзя добавить только button-trasnparent и button? Мне кажется 3 класса на одну кнопку излишне, ведь общие черты даст кнопка button, а прозрачной сделает ещё один класс. Я допускаю header__button, если кнопке надо ещё отступ добавить 🤔
3) Я правильно понял, что .container нужен исключительно для ограничения блока по ширине/высоте? А .wrapper для внутренних отступов 🤔
Привет!
1. Иннер - внутренняя обертка, враппер - внешняя.
2. Для консистентности. Без этого класса внутри шапки не будет БЭМ-элемента кнопки, что странно.
3. Контейнер нужен и для ограничения ширины и для задания внутренних горизонтальных отступов, чтобы при сужении внутреннее содержимое не слипалось с краями экрана. Враппер я использую только, если требуются псевдоэлементы для элементов, которым из прописать напрямую нельзя (img, input, select). Враппер в классическом понимании (то, что можно увидеть у каждого второго верстальщика на ютубе) - это контейнер.
Сколько переизбыточности кода! Для каждого задавать class. Какой в этом смысл? Это выливается в лишние байты трафика. А если таких li не 5-10 штук, а сотни на странице, трафик страшно растёт. Страница будет весит 2 Мб, вместо условного 1 Мб!!
Это вы ещё Tailwind и подобные ему библиотеки не видели…
😍😍
Привет отличное видео, спасибо 👍👍👍
ПОЖАЛУЙСТА ПОМЕДЛЕННЕЕ ГОВОРИТЕ!!!!!!
Привет, а можно описывать элемент по селектору, а не по классу. Например, у меня есть блок .video и в нём всегда будет лежать только видео. Вот так можно описать .video video, с точки зрения BEM?
Привет! Имеешь в виду использовать селектор по имени тега в БЭМе? Вообще, не желательно. Вся суть БЭМа сводится к единообразию «веса» селекторов, а этого можно достичь только, если все селекторы будут состоять из одного класса.
И зачем делать лишнюю обертку над ? Можно ведь просто сделать .
Вообще нет слов, круто по полочкам все разложил, спасибо огромное однозначно подписка и лайк 😎😎😎😎🔥🔥
бэм от тебя ждали многие , всех нас можно поздравить))), щас ждём вёрстку посложнее и js
Здравствуйте, можете посоветовать курсы или источники по React для новичков?
Привет! Я бы предложил ua-cam.com/video/GNrdg3PzpJQ/v-deo.htmlsi=Oo8riMAfQa9FlOLk и, вероятно, ua-cam.com/video/kz23xxukY5s/v-deo.htmlsi=oiUWDh517q2FLPRI. Первый - смотрел лично, очень хорошо всё объясняется.
Видео очень крутое. Только я не понял, зачем добавлять кнопке button класс button--transparent , если уже есть класс header__button с которым можно взимодействовать?такая кнопка только в header вроде.Буду признателен.
Привет! По опыту знаю, что такие вещи лучше делать модификациями, а не стилизовать конкретное место через БЭМ-элемент. В будущем может понадобится такая кнопка и в других местах.
@@AleksanderLamkov понял, Спасибо за ответ.
видео супер!!!!!!как сделать чтобы нижние подчеркивания разделялись?
Привет! В каком плане? Чтобы визуально можно было лучше отличить одинарное подчеркивание от двойного? Нужно шрифт в IDE поменять. У меня вроде JetBrains Mono стоит.
отличное видео, очень понятно, спасибо!
Автору лайк. Только очень быстро говоришь
Спасибо, Александр! Расскажи еще про свой сетап) микро, звуковую, шумил комнату, нет)
Привет! Микрофон Shure SM7B, внешняя звуковая карта Steinberg UR22C. С комнатой ничего не делал, динамический микрофон улавливает только ближайший звук, даже речь в метре от него уже будет не слышна :)
@@AleksanderLamkov Понял, спасибо большое!) Заметил, ты обрезаешь свое дыхание, и записываешь фразы только на одно вдохе😁 это делаешь для уменьшения времени видео? Получается сумбурно, потому, что информация плотная и валится потоком без естессвенных человеческой речи пауз)) я смотрю тебя на 0,75)))) естесственно скорости, а не водки)) но, спасибо, что решил делиться концентратом, без воды!)
На самом деле я всё ещё экспериментирую с динамикой речи и монтажом. Но я учту этот момент в будущем. Это уже не первое мнение о том, что информация на такой скорости непросто воспринимается.
Можешь, пожалуйста, сделать обзор на свой VS,что у тебя добавлено
Привет! У меня WebStorm. VSCode не использовал уже много лет. Про свои настройки IDE планировал сделать видео чуть позже)
Ну что же, когда там JS? Или какие планы остались ещё по CSS? SCSS?
Привет! На днях видео по препроцессору стилей, на каникулах мини-курс по цифровой доступности для Frontend-разработчиков, затем ещё один мастер-класс по верстке по БЭМу с препроцессором стилей, а уже в феврале - курс по JS. Пока всё идёт по плану :)
душный вопрос но все же. должен модификатор расширять или переопределять свойства?
Я считаю, что модификатор в первую очередь должен выполнять ту задачу, ради которой он создается. И если нужно переопределить значения свойств уже существующих в оригинальном селекторе, то это вполне нормально. Главное не городить портянок из обращений ко вложенным элементам, усложняя итоговый селектор и его вес.
@@AleksanderLamkov где то на просторах англоязычного интернета читал статью, что модифактор нужен для расширения. то есть мы создаем .button c общими стилями, а потом что то типа .button - - transparent, button - - white button - - accent и тд. считаешь это не совсем верным подходом? из-за возросшего кол-ва классов?
Да, я думаю, что в таком случае чтобы сделать «дефолтную кнопку» придется лепить в разметке 3-4-5 классов и это не ок. Я всегда делаю «дефолтный компонент» в оригинальном селекторе БЭМ-блока, перечисляя внутри все свойства, которые мне нужны, а уже после, при необходимости, делаю модификации, где с бОльшей вероятностью я что-то буду переопределять.
@@AleksanderLamkov благодарю
Читал суждение, что именовение классов аналогично названию тега может вызвать какие-то не желательные последствия (например - ). Насполько оправдано данное утверждение или же это заблуждение?
Это относится к не-семантическим и тегам, зачастую состоящих из 1-2 символов: a, p, h1-h6, b, u, s, ul, ol, li и так далее - такие имена классов действительно не очень хорошие. А вот header, footer, article, section, nav, aside - это хорошие имена классов к соответствующим тегам.
@@AleksanderLamkov Спасибо Александр
@@AleksanderLamkov По БЭМ не рекомендуется обращаться на прямую к тегам. Стоит ли тогда вешать классы на body, html ? body с классом по моему будет выглядить странно...
Не стоит, если речь не идет про модификации или состояния. Допусти, если нужно заблокировать скролл, я всегда на с помощью JS добавляю класс is-locked.
@@AleksanderLamkov Спасибо
на скорости 0.75 значительно понятнее)
Да уж, обычно приходится ускорять, а тут аж замедлять, моск не успевает :)
Кто-то еще пользуется этим в проде? Какие преимущества у бэм перед css модулями?
Вынужден использовать модули, но только потому, что один проект - это библиотека компонентов, второй - монструозная экосистема, где черт ногу сломит, пересечения классов чреваты непредсказуемыми последствиями.
Но будь у меня чистый проект с нуля, где точно нет и не будет никаких сайдэффектов по стилям прилетающих непонятно откуда, с удовольствием использовал бы БЭМ.
Ну а если разрабатывается не SPA, а что-то проще, то БЭМ - всё ещё мастхэв.
А если говорить про преимущества, то как минимум проще анализировать разметку в DevTools во вкладке Elements, если имена классов не состоят из рандомных хешей. Об этом никто не говорит, словно проблемы нет, но наверняка всем знакома ситуация, когда надо дебажить верстку в поисках бага «что-то едет и выглядит не как в макете», и дебажить проект с модульными стилями в таком случае - отвратительный опыт.
css модули можно настроить таким образом, что бы хэш добавлялся уже к названию класса, а не полностью его заменял
Это я понимаю, у меня в библиотеке компонентов так вообще лишь осмысленный префикс добавляется без хешей, но всё равно читаемость страдает.
Просто мне тоже не особо нравится модули, больше нравится какой-то более абстрактный css писать. Вот думаю может с бэм будет удобнее
ещё говорят модули и общие классы не стоит комбинировать
Очень познавательное видео. Только очень быстро тараторишь, пришлось на 0.8 скорости смотреть, а там качество теряется. Ты хоть паузы иногда вставляй.
Привет! Учту :)
я по природе эстет немного, и худшее что происходит во фронте (ну может кроме Tailwind css) это уродливая, но безусловно местами полезная вещь как БЭМ.
Слава богу есть киллер фича в виде css модулей. Не рекомендую никому учить БЭМ.
БЭМ новичкам, которые ещё не работают со сборщиками проектов, полезен как никогда. Эта методология в первую очередь прививает компонентное мышление, которого порой сильно не хватает начинающим. Я научился декомпозировать большие интерфейсы страниц только благодаря тому, что наловчился в свое время с БЭМ.
@@AleksanderLamkov а как же принцип каскадности? ведь БЭМ просто послал его, внедрив свою концепцию уникальных классов.
У меня основная претензия в эстетической стороне наименования классов - двойное подчеркивание, одинарное, дефис.. классы становятся длинющими. по идее саму последовательность названий классов каскада в блоке как раз и можно представить в виде БЭМ, таким образом сохраняя уникальность и эстетику. Но тут уже личное дело каждого.
Принцип каскада знать нужно, это факт. И новичкам сходу не нужно на БЭМ писать, это губительно. Нужно сначала помучаться с классическим CSS, чтобы понять "почему мой селектор не перебивает другой селектор". Я на канале как раз последовательно выпустил два мастер-класса по верстке. В первом - никакого БЭМ. Во втором - БЭМ и Sass, активно делил интерфейс на независимые блоки.
похоже на tailwind, нет?
Совсем нет.
BEM в 2024?) CSS-модули вам в помощь
Почему нет? Это разные способы написания стилей для разных целей.
Походу не для начинающих😮
Привет! А что именно показалось сложным?
@@AleksanderLamkov сразу особенности применения без базы. И Не понятно как на практике применять
Посмотри последний мастер-класс на канале, там всё на практике показано:
ua-cam.com/play/PL0MUAHwery4rdZt-8E9p9zty2ZUCH6Ai3.html&si=JITgUcpklw4we2aU
Что мертво, умереть не может 😁
Просто документацию зачитал…ну молодец парень👍
В какой-то степени да, как же иначе. Ориентировался прежде всего на оригинальный источник.