БЭМ - простыми словами. Часть 2

Рет қаралды 4,768

Күн бұрын

Модификаторы в БЭМ. Рассказываю и показываю на примере. Что такое классы-модификаторы и как их использовать в HTML и CSS с использованием методологии БЭМ.
📌 Часть 3: • Вёрстка адаптивного са...
👁‍🗨 Исходники в телеграме: t.me/frontend_du2
👁‍🗨 Discord сервер: / discord
👁‍🗨 VK: frontend_du2
👁‍🗨 Дзен: dzen.ru/frontend_it
Тайм-коды:
00:00 - Начало
00:55 - Модификатор
04:00 - Модификатор блока
07:36 - Модификатор элемента
11:00 - Модификатор и значение
13:44 - Сетка карточек

Пікірлер: 130

@manageridea Ай бұрын

Месяц назад объявил свой первый див в Vs code. Когда наткнулся на вашь канал, подпрыгнул от восторга. Теперь учиться будет еще проще вместе с вами. 🎉🎉

@user-mt9lq4hl1c 7 ай бұрын

Полезное, замечательное видео! Жду практику по БЭМ

@alex_dudukalo 7 ай бұрын

Спасибо вам :) Да, готовлю большое видео с версткой сайта, БЭМ и адаптивностью :) Будет интересно.

@Shlomo_87-th 4 ай бұрын

хороший курс по бэм. без шутокю перелапатил много каналов чтоб разобраться. Это самый понятный и не душный урок по теме. большое спасибоБ мне оч зашло)

@alex_dudukalo 4 ай бұрын

Очень приятно читать ваш комментарий. Еще приятнее, что вы сравнили его с другими роликами. Рад, что смог создать уникальный контент, а главное интересный и понятный. Буду стараться работать, улучшать будущие ролики :) Зарядили меня на весь день :)

@user-hq4zh1ov5k 3 ай бұрын

Спасибо. Преподавание - это Ваше.

@raritetnayaplenka 4 ай бұрын

Спасибо вам большое! Прохожу платный курс с преподавателем, он объяснил про БЭМ, но на моменте присвоения нескольких классов мозг просто утёк, т.к. все объяснялось и делалось быстро и инфа была не так хорошо структурирована, как у вас. Однозначно лайк и подписка)) странно, что у ваших видео по БЭМ так мало просмотров. Желаю всяческих успехов и буду ждать много полезного контента)

@user-eu8dd3ek7g 2 ай бұрын

Отлично, все понятно и наглядно. Спасибо Александр

@nephrosis6110 5 ай бұрын

Подача материала пушка, автор почаще подобных роликов, спасибо!

@alex_dudukalo 5 ай бұрын

Спасибо за обратную связь 🤗 рад, что видео вам понравилось, оставайтесь на канале 😎

@vhsru 8 ай бұрын

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

@alex_dudukalo 8 ай бұрын

Спасибо ☺ надеюсь и другие видео канала будут вам полезны))

@vhsru 8 ай бұрын

@@alex_dudukalo это видео просто было наиболее актуальным для меня в данный момент )

@user-go4bz9wm3n 4 ай бұрын

Благодарю ! Очень грамотно, просто и эффективно заходит от Вас полезная информация! Успехов и процветания! Однозначно подписка и лайки

@alex_dudukalo 4 ай бұрын

Спасибо большое за ваш комментарий и подписку🤗 ваша поддержка очень важна! Надеюсь и другие видео канала будут вам полезны))

@user-gf1ue8qe6i 6 ай бұрын

Благодарю за вашу работу, все очень понятно и интересно объясняете!!! Жду практику по БЭМу!!! С удовольствием посмотрю!

@alex_dudukalo 6 ай бұрын

Спасибо за ваш комментарий. Я рад, что видео вам понравилось. Да, по практике БЭМ готовится большое видео :)

@andrew_tt 6 ай бұрын

Большое спасибо! Очень понятно и информативно! Да, нужна практика и по БЭМ) Так рад, что нашел ваш канал!!!

@alex_dudukalo 6 ай бұрын

Спасибо за ваш комментарий🤗 про практику тоже рассматриваю, оставайтесь на канале 😎

@OlgaVO 8 ай бұрын

Александр, ну как же вы понятно все объясняете, я теперь про грид поняла в одном видео. И про БЭМ, записывайте и видео практики и про before after

@alex_dudukalo 8 ай бұрын

Спасибо большое за ваш отзыв, очень приятно читать☺, только добрался до комментариев, обязательно запишу практику по бэм и видео про before after, спасибо вам!))

@user-hc7wq9om9i 8 ай бұрын

Большое спасибо за видео, как всегда все на высоте)))) Ждём практику по БЭМу)))) 🔥🔥🔥🔥🔥

@alex_dudukalo 8 ай бұрын

Спасибо за Ваш комментарий🤗 рад, что видео вам полезны

@user-zx2tw8lk7y 8 ай бұрын

Александр, спасибо за Ваш труд! В изложенном Вами материале методология БЭМ раскрыта простыми и понятными словами и примерами. Теперь писать читаемый и упорядоченный код станет проще. С удовольствием посмотрим видео с практикой по данному материалу. Желаю дальнейших успехов в продвижении канала и профессиональной деятельности!

@alex_dudukalo 8 ай бұрын

Спасибо 😊 ваша поддержка очень вдохновляет 🔥

@vladkior1567 8 ай бұрын

Спасибо! Круто объясняете, жду видео с адаптивной версткой по БЭМу!

@alex_dudukalo 8 ай бұрын

Спасибо вам :) Обязательно сделаем. Будем большое видео с практикой верстки по БЭМ

@a.k.9386 8 ай бұрын

Спасибо большое за урок. Ждем по псевдоэлементам!

@alex_dudukalo 8 ай бұрын

Спасибо вам :) Ставлю в план видео

@kiraobukhov 7 ай бұрын

Спасибо за видео, все очень понятно. Жду следующее видео по практике БЭМ.

@alex_dudukalo 7 ай бұрын

Спасибо за ваш комментарий🤗 оставайтесь на канале, чтобы не пропустить продолжение 😎

@alexgrinberg1888 5 ай бұрын

Алекс, вы очень доходчиво и подробно объясняете. Я веду команду JS разработчиков где мы испытывали трудности в определении и упорядочении оберточных CSS классов компонентов. Решение было применить стили по БЭМ. Но никто не знал как точно ими пользоваться. Нашел твое видео и просто глаза открылись. Я уже вижу где команда использует ВЭМ неправильно и планирую исправить ошибки, ну и естественно подтянуть команду в знании по БЭМ используя твою методику обучения. Выпускай больше видосов по верстке, стилю, ну и вообще фронт энду! Ты молодец! Жду новых видосов!

@alex_dudukalo 4 ай бұрын

Здравствуйте, Алекс. Спасибо за такой приятный комментарий от вас. К сожалению не успел ответить быстрее. Я очень рад, что видео действительно помогли вам разобраться в теме БЭМ. Очень надеюсь, что это поможет вам в вашем текущем проекте и в будущих тоже :)

@Leha_Andr 8 ай бұрын

Добил кол-во лайков до сотки ;) Спасибо за видосы по бэм!!!!

@alex_dudukalo 8 ай бұрын

Спасибо 🔥 ваша поддержка очень важна!))

@PioneerWhoDreams 7 ай бұрын

Понятный и простой урок, хотелось бы увидеть видео с практикой !

@alex_dudukalo 7 ай бұрын

Спасибо за отзыв, оставайтесь на канале, чтобы не пропустить продолжение 😎

@krashovotv4437 5 ай бұрын

Видео,как и другие, очень понятные, Вы очень хороший преподаватель! В видео говорится,что будет ещё одно видео с практикой, жду!

@alex_dudukalo 5 ай бұрын

Спасибо большое, очень приятно читать. Надеюсь, получится развивать эти навыки. Да, в этом месяце планирую записать третий ролик :) Длинный конечно получится, но надеюсь будет полезно.

@user-nf1oz1js1l 3 ай бұрын

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

@solar_inside 8 ай бұрын

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

@alex_dudukalo 8 ай бұрын

Спасибо 😊 ваша поддержка очень мотивирует

@Drtt500_Lk 2 ай бұрын

Видео супер!!! Продолжай в том же духе👍

@scorobogatco 6 ай бұрын

Очень доходчиво объясняете, лучшего объяснения не встречала. Спасибо за ваш труд!

@alex_dudukalo 6 ай бұрын

Спасибо 🙈 ваша поддержка очень мотивирует 🤗

@lawreporter 7 ай бұрын

Спасибо огромное! Все так понятно рассказываете.

@alex_dudukalo 7 ай бұрын

Спасибо за ваш комментарий😊 надеюсь и другие видео канала будут вам полезны))

@user-pn2yc4cb8q 4 ай бұрын

Спасибо. Хорошо объяснил тему :)

@andreyfedyukin8360 8 ай бұрын

Супер 👍 Смотрим 😊

@alex_dudukalo 8 ай бұрын

Спасибо 🔥🔥🔥

@user-zu8zv2ux2g 8 ай бұрын

Лучшее видео по БЭМу, все понятно, жду видео с практикой.

@alex_dudukalo 8 ай бұрын

Спасибо 🔥 в ближайшее время планирую снять))

@TuTaH09 5 ай бұрын

Большое спасибо за серию роликов про БЭМ! С нетерпением жду продолжение!))

@alex_dudukalo 5 ай бұрын

Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны))

@robot9399 7 ай бұрын

Огромное спасибо! Крутое видео, всё просто и понятно

@alex_dudukalo 7 ай бұрын

Спасибо за ваш комментарий 🤗 надеюсь и другие видео канала будут вам полезны))

@user-wl2hi2hs8m 7 ай бұрын

Спасибо! Кое-что новое понял. Сегодня применю

@alex_dudukalo 7 ай бұрын

Спасибо за отзыв, рад, что ролик оказался вам полезен!) оставайтесь на канале 😊

@furgos6611 7 ай бұрын

Как же все понятно стало ❤

@alex_dudukalo 7 ай бұрын

Рад, что вы узнали что-то новое 🤗 спасибо за комментарий))

@ndrewhas 8 ай бұрын

Для продвижения. Посмотреть практику с адаптивностью было бы интересно. Еще интересно узнать какие проблемы или недостатки есть у бэм (если они есть) и как они решаются

@alex_dudukalo 8 ай бұрын

Спасибо вам за помощь :) Да, конечно недостатки есть. Одни из них - длинные названия классов (обойти можно, сокращая слова, но теряется читаемость кода) - в маленьких проектах смотрится громоздко ( можно не использовать БЭМ в простейших проектах) - не всегда прост в освоении :)

@relaxdeepsleepmusic3608 8 ай бұрын

Интересная тема, вечерком обязательно посмотрю 👍

@alex_dudukalo 8 ай бұрын

Спасибо, надеюсь вам понравился ролик 🤗

@weepie9103 2 ай бұрын

Все очень понятно, thx!

@user-lm9ee1gn5p 8 ай бұрын

Спасибо, отличная практика

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий 🤗

@user-wu1kd2uf6z 8 ай бұрын

Спасибо большое! Куда как понятнее, чем в любом другом источнике. Только благодаря Вам выяснила, что тучу времени верстаю неправильно))

@alex_dudukalo 8 ай бұрын

Спасибо за обратную связь 🤗 надеюсь и другие видео на канале будут вам полезны))

@user-lw7mg8yx4p 8 ай бұрын

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

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий 🤗

@user-sl9bz9fq1y 6 ай бұрын

Огонь 🔥 спасибо! Сверстай пожалуйста страничку по методологии бэм с использованием какого-нибудь препроцессора 😊

@user-kc3gq8yx7f 8 ай бұрын

Уроки супер, продолжай.

@alex_dudukalo 8 ай бұрын

Спасибо 😊 ваша поддержка очень мотивирует

@user-kc3gq8yx7f 8 ай бұрын

Хотелось увидеть уроки по DOM@@alex_dudukalo

@eugeniotur Ай бұрын

Спасибо за ваш труд, если возможность записать урок про адаптивность и другие новшества в css.?🙃

@Aldikjo 8 ай бұрын

Классное видео!

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий)))

@user-jq6tr6rr8v 8 ай бұрын

Спасибо большое!

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий🤗

@user-jh9ip6zn6e 8 ай бұрын

спасибо огромное!!!

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий 😊

@user-zo6rp1xn8i 8 ай бұрын

Спасибо огромное!!!! ❤❤❤❤❤

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий☺ надеюсь и другие видео канала будут вам полезны😊

@Tilda_Practice 8 ай бұрын

Спасибо, было бы классно если Вы запишите видео по приложению TODO, что бы над списком дел добавьте кнопку переключения используемого хранилища. Нажатие на кнопку должно приводить к перезагрузке приложения с другим хранилищем. Если использовалось локальное хранилище браузера, то происходит переключение на сервер с API, и наоборот. Надпись на кнопке должна меняться соответственно на «Перейти на локальное хранилище» или «Перейти на серверное хранилище». По умолчанию используется локальное хранилище. Дополнительно (по желанию). При работе с модулями можно пользоваться так называемыми динамическими импортами, которые позволяют загружать код модуля в тот момент, когда он становится нужен. Механизм довольно простой и похож на уже знакомый вам fetch, так как он тоже асинхронно загружает ресурс.😊

@alex_dudukalo 8 ай бұрын

Да, я давно планирую записать такой ролик. Насколько я понял, вы имеете в виду оно из заданий. Skillbox. Думаю, что подобное запишу. Но для начала разберу тему импортом, модулей и динамических импортов. Будет интересно :)

@user-fh7dx7tz4p 8 ай бұрын

@@alex_dudukaloда верно

@m_mazaixin 8 ай бұрын

Очень познавательное видео, а самое главное понятное новичку. Хотелось бы стрим-практику

@alex_dudukalo 8 ай бұрын

Обязательно сделаем или ролик или стрим по практике, пока думаю над форматом😊надеюсь вам понравится!) спасибо за ваш комментарий🔥

@TeomunMete 6 ай бұрын

Спасибо 🎉🎉

@alex_dudukalo 6 ай бұрын

Спасибо за комментарий 🔥

@sam_starikov 6 ай бұрын

Четко 👌🏻

@alex_dudukalo 6 ай бұрын

Спасибо 🔥

@relaxdeepsleepmusic3608 8 ай бұрын

Интересно посмотреть видео с практикой и видео про before и after!

@alex_dudukalo 8 ай бұрын

Обязательно запишу такой ролик, спасибо за ваш комментарий😊 извините за долгий ответ

@nouchance 8 ай бұрын

Спасибо!

@alex_dudukalo 8 ай бұрын

Спасибо за отзыв))

@gm_Maker 7 ай бұрын

Случайно нет курса на юдеми? Очень понятно объяснил 😊

@alex_dudukalo 7 ай бұрын

Спасибо :) Я рад, что ролик понравился. Я думал и думаю о юдеми и других платформах. Возможно приду туда, но до этого хочется хорошо изучить эти прощадки :)

@user-go5zz2tl2q 8 ай бұрын

Супер понятное объяснение 👍 Александр, не думали про видео верстки с помощью Gulp да еще и с БЭМ?

@alex_dudukalo 8 ай бұрын

Артем, спасибо за ваш отзыв. Очень приятно. Да, обязательно сделаю видео верстки со сборщиком. Это важная и актуальная тема :)

@user-kk2zt6xi2c 8 ай бұрын

Спасибо вам за видео, до этого писал все в строку одну у меня элемент был модификатором) Давайте урок по необычным псевдоэлментам или псевдоклассам

@alex_dudukalo 8 ай бұрын

Спасибо вам :) Да, уже готовлю такой ролик. Будет интересно узнать ваше мнение о нем. Готовлю к публикации )

@user-pb1nl3hy2i 8 ай бұрын

Спасибо было очень интересно ! А не большой вопрос: Одно нижнее подчеркивание для модификатора, это принцыпиально ? Или можно поставить просто дефис ? Про псевдо элемент тоже интересно посмотреть.

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий. Дефис используется для разделения слов. Если название блока или элемент состоит из двух слов, то они разделяются -. Поэтому символ тире нельзя использовать для названия модификатора, но двойное -- можно. Спасибо за ваш комментарий. Обязательно запишу такой ролик :)

@typhoonx04 8 ай бұрын

Спасибо за ролик, Александр, как я знаю, вы любите Vue, не хотели бы сделать курс по Vue3 на Composition API + TS и например Pinia? Сейчас спрос на Vue очень сильно растет Я думаю это было бы очень круто!

@alex_dudukalo 8 ай бұрын

Спасибо за ваш комментарий. Да, я очень хочу сделать курс по Vue, действительно нравится эта тема. А данный момент работаю над курсом по JS. Как раз он и будет готовить к курсу по Vue. После JS хочу приступить к фреймворку 😇 согласен, он набирает обороты и обучающий материал становится все более востребованным 😇

@user-kj3mo6se7u 8 ай бұрын

@@alex_dudukalo ооо буду ждать, очень нравится подход к роликам и объяснения

@ktozdes72 8 ай бұрын

Модификатор еще так называют: блок__элемент--модийикатор 😊

@alex_dudukalo 8 ай бұрын

Да-да. Так тоже можно называет, согласен :) Но, желательно придерживаться одно общей стилистики :)

@ruslankham8235 6 ай бұрын

Спасибо за урок! 2 вопроса: 1. Не совсем понял про роль тире в названии классов (когда его можно ставить и сколько раз в одном классе можно использовать). 2. Зачем нужен был UL и LI, нельзя было просто гридами обойтись? есть блок грид и есть его элементы, которые располагаем как нам надо... Для чего список то?

@shprints84 7 ай бұрын

Большое спасибо за интересное видео. Такой вопрос: зачем делать два модификатора для элемента звезды, когда можно сделать один? То есть вместо rating_size_s → rating_size-s? Ведь просто rating_size в ролике никак не стилизуется, т. е. не используется.

@alex_dudukalo 7 ай бұрын

Здравствуйте, прошу прощения за долгий ответ. Хочется отвечать на интересные вопросы, но не всегда получается :( Модификаторы двух типов позволяют добавлять разные настройки. Это дает вам возможность менять конфигурацию и выбирать не из двух размеров, а уже из трех, четырех и так далее. Это бывает очень полезно :)

@shaman8016 8 ай бұрын

Доброго времени суток.Спасибо за ваше видео. Можете показать как добавить товар в избранное, что бы отображение карточки было на отдельной странице сохранялось в localStorage или cokkie. Без бэка на нативном JS?

@alex_dudukalo 8 ай бұрын

У меня есть видео, которые могут вам помочь разобраться: kzfaq.info/get/bejne/q7xlksKo16uZd58.html kzfaq.info/get/bejne/l6mHdLyI3t_Rp3U.html Обязательно их посмотрите, там я показываю как работать с JSON, ls и как сохранять данные в виде массива. Но я думаю я запишу предлагаемый вами ролик :) Спасибо за приятный комментарий :)

@shaman8016 8 ай бұрын

@@alex_dudukalo Спасибо за совет. Обязательно посмотрю.

@alexandrs.1706 8 ай бұрын

Спасибо большое! Случайно наткнулся на Ваш канал. Видео на высоте! Лайк+подписка!

@alex_dudukalo 8 ай бұрын

Спасибо 🤗 ваша поддержка очень мотивирует🔥 надеюсь и другие видео канала будут вам интересны))

@Youmakes 7 ай бұрын

🤩

@alex_dudukalo 7 ай бұрын

Спасибо 🔥

@user-ox2cf4rk6l 8 ай бұрын

💯

@vladimiriv77 8 ай бұрын

👍

@alex_dudukalo 8 ай бұрын

😊🔥

@user-nf1oz1js1l 3 ай бұрын

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

@user-co8ui7gk5g 8 ай бұрын

Нижнее подчеркивание для модификатора, VSC не принимает, подчеркивает волнистой линией, пишет предупреждение и предлагает исправить на дефис. Прокомментируйте пжл.

@alex_dudukalo 8 ай бұрын

Как видите в моем VS Code модификатор не выделяется красным. Возможно у вас установлено расширение какое то?

@user-nf1oz1js1l 3 ай бұрын

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