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

  Переглядів 12,799

Александр Дудукало

Александр Дудукало

День тому

Рассказываю и показываю БЭМ на примере. Правила названия классов в HTML и CSS по методологии БЭМ. В этом видео вы узнаете о том, что такое блоки и элементы. Как их отличать и использовать.
📌 Часть 2: • БЭМ - простыми словами...
👁‍🗨 Исходники в телеграме: t.me/frontend_du2
👁‍🗨 Discord сервер: / discord
👁‍🗨 VK: frontend_du2
Тайм-коды:
00:00 - Начало
02:21 - Блок
11:00 - Элемент

КОМЕНТАРІ: 172
@matthewbellamy4008
@matthewbellamy4008 4 місяці тому
Друг, как же ты круто объясняешь. Очень редко встречаю таких людей
@alex_dudukalo
@alex_dudukalo 4 місяці тому
Очень приятно читать :) Комментарий поднял настроение. Рад, что видео понравилось. Обязательно посмотрите вторую часть. Хорошего дня :)
@user-zo6rp1xn8i
@user-zo6rp1xn8i 6 місяців тому
Наконец у меня есть постоянный учитель, от которого я не бегаю по разным другим!! Спасибо, спасибо и ещё раз спасибо❤
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Безумно приятно читать такие комментарии ☺ спасибо! Ваша поддержка очень вдохновляет 🤗
@FrontendPlace
@FrontendPlace 22 дні тому
Лучшее объяснение. Сколько видео не смотрел, понял не мог. Спасибо тебе большое. Удачи в развитии
@alex_dudukalo
@alex_dudukalo 22 дні тому
Очень приятный комментарий ) Спасибо вам. Рад, что помог разобарться
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 7 місяців тому
Супер, как раз перед сном годный контент, лучше любого фильма!👍
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Это очень приятно. Кстати, я тоже вместо просмотра фильма в воскресенье выбрал вариант записи ролика на ютуб :))
@denwolf9159
@denwolf9159 7 місяців тому
Отличный ролик! Спасибо. Наконец понял про запрет марджин в БЭМ блоке
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за Ваш комментарий😊
@vvks9901
@vvks9901 7 місяців тому
Круто, что среди множества подобных видео, продолжают снимать новые видео на эти же темы! Свежак всегда приятнее смотреть! Спасибо!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за комментарий 🔥
@andreyfedyukin8360
@andreyfedyukin8360 7 місяців тому
Супер! 👍 Спасибо. Как всегда всё очень доступно и понятно.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за отзыв, 😊ваши комментарии очень мотивируют 🔥
@philkadir0v
@philkadir0v 3 місяці тому
Пересмотрел 5-6 видео на тему БЭМ, у вас реально доходчиво, простым языком и на практике. Спасибо, пошел смотреть вторую часть материала)
@solar_inside
@solar_inside 7 місяців тому
Какие же крутые уроки, очень доступно и без воды! Огромное спасибо.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за отзыв 😊 ваши комментарии очень мотивируют))
@user-zo6rp1xn8i
@user-zo6rp1xn8i 7 місяців тому
Как всегда классное объяснение и куча полезной информации! Спасибо, Александр 😊
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий😊🔥
@slavaProg
@slavaProg 19 днів тому
Мне очень обидно что на таком замечательном какале так мало подписчиков и лайков! Александр я восхищаюсь вами за такое объяснение и четкое понимание дела - желаю успеха в развитии канала выпускайте почаще🙂
@ludmilas9137
@ludmilas9137 7 місяців тому
Спасибо 🙏💕 Как всегда, очень подробное и понятное объяснение. Особенно ценно, что применяется на практике! Практика необходима! Добра вам!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за Ваш комментарий😊 приятно, что вы также оценили домашние задания 😊 надеюсь и другие видео курса будут вам полезны))
@dukecca
@dukecca 7 місяців тому
Обязательно продолжать! Ждем следующего)
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Так приятно читать такие комментарии 😊 спасибо, ваша поддержка очень мотивирует
@VItaliy-beldiy
@VItaliy-beldiy 7 місяців тому
всегда рад новым видео))!!!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Виталий, спасибо 😊 Ваша поддержка вдохновляет 🔥
@tigrext20
@tigrext20 7 місяців тому
Ждём продолжения!)
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Приятно, что ждете новые видео,спасибо 🤗 в ближайшие дни будет 😎
@user-jh9ip6zn6e
@user-jh9ip6zn6e 7 місяців тому
на столько просто и понятно) спасибо, самое главное продолжай !!!!!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий 🤗 буду стараться
@user-iq3sw4jr5i
@user-iq3sw4jr5i 7 місяців тому
Александр, спасибо за такое подробное объяснение 🔥 Ваши видео не раз мне помогали в работе.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за отзыв 🤗 рад, что мои видео вам помогают))
@1.meeri12
@1.meeri12 2 дні тому
Спасибо за доступное объяснение💙
@user-lm9ee1gn5p
@user-lm9ee1gn5p 7 місяців тому
Александр, спасибо освежил знания
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за отзыв))
@OlgaVO
@OlgaVO 7 місяців тому
Александр спасибо, жду с нетерпением продолжения! Всё очень понятно объясняете, я Рада, и качество изображения топ. Действительно сейчас во многих вакансиях требование БЭМ поэтому хочется скорее продолжения 🤍🤍👍🏻
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за отзыв, рад, что видео Вам полезно 🤗 сегодня как раз вышла вторая часть))
@user-hc7wq9om9i
@user-hc7wq9om9i 7 місяців тому
Александр, спасибо большое за полезное видео, подачу и практику!)))) Вы молодец, успехов в дальнейшем развитии)))
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо большое за ваш комментарий и поддержку😊 надеюсь и другие видео курса будут Вам полезны))
@badandr
@badandr 7 місяців тому
Александр, спасибо большое за видео! Теперь я знаю что такое БЕМ!)
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за Ваш комментарий😊 приятно, что с моими видео Вы узнаете что-то новое 🤗
@user-eo5cr9vf9e
@user-eo5cr9vf9e 8 днів тому
Очень хорошая подача материала.
@alex_dudukalo
@alex_dudukalo 7 днів тому
Спасибо за такой приятный комментарий. Я рад, что видео вам понравилось :)
@vhsru
@vhsru 7 місяців тому
Спасибо! Очень доходчиво!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий😊
@user-zj6gz2lk9b
@user-zj6gz2lk9b 7 місяців тому
Здравствуйте. Очень интересно рассказываете.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте. Спасибо за Ваш комментарий😊
@user-jx7pm8ld2h
@user-jx7pm8ld2h 7 місяців тому
все круто жду продолжения
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий))
@olegdp
@olegdp 3 місяці тому
Благодарю. Хорошее, подробное объяснение.
@alex_dudukalo
@alex_dudukalo 3 місяці тому
Спасибо за ваш комментарий :) Очень приятно.
@alonewolf2610
@alonewolf2610 2 місяці тому
Классно и понятно. Спасибо вам за урок.
@Youmakes
@Youmakes 5 місяців тому
Вселенская благодарность за подробный урок по БЭМ 🎉
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Спасибо 🔥🤗 надеюсь и другие видео канала будут вам полезны)))
@user-kc3gq8yx7f
@user-kc3gq8yx7f 7 місяців тому
Спасибо, очень доходчиво.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий🤗
@furgos6611
@furgos6611 6 місяців тому
Просто лучший ,спасибо за все❤
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Спасибо ☺ ваша поддержка очень вдохновляет)) оставайтесь на канале))
@kontorasb2754
@kontorasb2754 7 місяців тому
Суппер!!!! Вот теперь стало понятно!!!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Рад, что видео оказалось вам полезным 😊 спасибо за отзыв
@mind150
@mind150 7 місяців тому
Спасибо! Классно)
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за обратную связь 😊
@scorobogatco
@scorobogatco 5 місяців тому
Спасибо огромное за подробное видео, особенно за объяснение, как переиспользовать блоки!!!
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Спасибо за ваш комментарий🤗 надеюсь и другие видео канала будут вам полезны))
@user-lm9ee1gn5p
@user-lm9ee1gn5p 7 місяців тому
Ждем продолжение
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Уже вышло 🔥🔥🔥
@Danilina-VA
@Danilina-VA 6 місяців тому
Александр, огромное спасибо! ролик прекрасный. Пошла смотреть второй ) PS: вдвойне приятно смотреть видео, когда оно сопровождается знакомым голосом куратора🥰
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Очень приятно читать такой комментарий😊 надеюсь ролики вам помогают и вы достигнете целей, которые перед собой поставили 🔥 оставайтесь со мной на канале, спасибо Вам!)
@weepie9103
@weepie9103 Місяць тому
Очень круто, thx!
@a1dar92
@a1dar92 6 місяців тому
Спасибо за понятное объяснение
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Спасибо за ваш комментарий😊
@schizaaaaa
@schizaaaaa 4 місяці тому
Александр, доброго времени суток! Благодарю Вас за прекрасный урок по методологии БЭМ. Урок хорошо усваивается, а самое главное, что в уроке нет воды, одна практика. Но, у меня небольшая просьба, если Вы параллельно задаете какие-либо вопросы по CSS, не могли бы Вы делать небольшую паузу(достаточно 2-3 секунд), и раскрывать ответ на свой вопрос, таким образом урок был бы более целостным, пробелы были бы закрыты. Были моменты, которые я впервые открыл для себя, а ответов на них не последовало, к сожалению. Желаю Вам успехов и исполнения всех желаний в Новом году!
@nargizagayfullina4062
@nargizagayfullina4062 7 місяців тому
Ваша серия выпусков по БЭМ ,возможно, будет первой в youtube с подробным и медленным объяснением этой технологии. Жду ролик с практикой , очень хотелось бы , чтобы вы сверстали большой полноценный макет с применением БЭМ. 🔥☄️ Спасибо!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, Наргиза. Спасибо за ваш комментарий и что выделили это видео от других. Мне очень приятно. Да, практика будет. Обязательно. На ней постараюсь максимально раскрыть эту тему. Интересно будет узнать ваше мнение.
@tatan2541
@tatan2541 7 місяців тому
Все понятно и доступно, учусь только верстать и хочу делать это правильно и тут такое видео, спасибо вам за это видео!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за ваш комментарий 😊надеюсь и другие видео курса будут вам полезны
@user-rz6uh6bn1j
@user-rz6uh6bn1j 4 місяці тому
Спасибо большое за Ваши видео и объяснения!!! Жду с нетерпением видео по вёрстке макета по БЭМ. Не планировали ли, случайно, опубликовать до НГ? Это как подарок подписчикам к новому году получится😊!
@elmirweb6583
@elmirweb6583 7 місяців тому
Мне кажется, что использование margin-bottom спорное решение, я использую row-gap, column-gap в зависимости от того, как направления главная ось flex-box, чтобы получить отступы между элементами друг под другом.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, Эльмир. Очень хорошее замечание и я с вами соглашусь. В этом примере удобнее было бы использовать gap для создания отступов. Но проблем в том, что в макете отступы между элементами карточки разные. И я так же хотел показать этим, что элементам внутри блока можно создавать внешний отступы. И подчеркнуть, что для блоков этот делать не следует. Но gap я люблю :)
@_NeRoKi_
@_NeRoKi_ 7 місяців тому
Супер! 👍 как всегда все понятно. Будет ли видео по DOM?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Да, такое видео обязательно планируется :) В контексте видео по JS
@user-rh8ed7og2u
@user-rh8ed7og2u 7 місяців тому
Александр, спасибо за видео! Редко кто может так просто и понятно доносить информацию. Все супер!!! А не планируете ли Вы серию видео о React, Vue и Angular? 😉
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, спасибо вам. Да, обязательно планирую. А именно рассказать про VUE. Закончу серию роликов по JS и буду работать с VUE.
@v.depressed
@v.depressed 7 місяців тому
Всегда думал что верстаю правильно по БЭМу теперь оказалось что я не тот смысл вкладывал. Спасибо за ролик всё простым языком понятно.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Я очень рад. что ролик был для вас полезным :) Обязательно посмотрите вторую часть. Интересно будет узнать ваше мнение :)
@love_SF
@love_SF 2 місяці тому
Никто не подсказал, что вместо min-height написано min-width :( Что касается темы - это лучшее объяснение, что я видел на ютьюбе!!!
@RuslanaRovdo
@RuslanaRovdo 7 місяців тому
Мне показалось, что ваше объяснение для чего нужен и как использовать БЭМ самое понятное из всех, что мне встречались. Даже на курсе толком не пояснили.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за Ваш комментарий 😊 рад, что видео вам помогло разобраться в БЭМ)) скоро выйдет вторая часть, надеюсь и она будет вам полезна 🤗
@user-wv3cz5pt6m
@user-wv3cz5pt6m 5 місяців тому
Очень хорошая подача учебного матерьяла. Спасибо.
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Спасибо 🤗 ваша поддержка очень важна, надеюсь и другие видео канала будут вам полезны)))
@eugeniotur
@eugeniotur 4 дні тому
exelente classe gracias por tu trabajo....!!!
@user-pu4fh5oc3n
@user-pu4fh5oc3n 7 місяців тому
мне очень нравится ваш контент, потому хочется как-то поучаствовать, вот мои мысли как можно улучшить канал( возможно они не очень, но вдруг мои мысли натолкнут тебя на что-то полезное для канала) 1. придумывай дз для двоих и больше людей, идею в том чтобы синхронизировать людей которые хотят обучаться + новые знакомства и более эффективное обучение ( я например обучаюсь сам) и было бы полезно проговаривать с кем-то выученный материал) 2. придумывать классные викторины по знаниям js, html, css, что даст участие в каждом видео и добавит уверенности в себе при знании вопросов 3.и если я не ошибаюсь то контента по истории цифрового мира вообще нету, про эволюцию программирования да и вообще веб технологий, можно делать видео по 10-15 минут это привлечет больше аудитории на канал!😊 4. делай голосование видео каких технологий записать
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, Виталий. У вас отличная идеи. 1) Я хотел придумать командные работы, но думаю, что скоро сделаю это конкретно для двоих. Спасибо, забираю это предложение. Возможно вы захотите принять участие :) 2) Думаю это можно сделать, подумаю об этом формате. 3) Да, это уже готовится. Сейчас этап написания сценария. Для меня это очень интересный опыт :) Очень интересно, что получится. Согласен с тем, что нужен контент для более широкой аудитории. 4) Да, сделаю в дискорд :) С БЭМ закончу и можно сделать У вас отличные идеи, забираю их все. Спасибо за это. Думаю, скоро вы увидите их реализацию. Не все сразу, конечно. Но, сделаем :)
@user-pu4fh5oc3n
@user-pu4fh5oc3n 7 місяців тому
я з большим удовольствием приму участие) я готов!!!
@user-pu4fh5oc3n
@user-pu4fh5oc3n 7 місяців тому
так что запишите мне в блокнот я на очереди 😊
@user-iu4de9lu1s
@user-iu4de9lu1s 3 місяці тому
Классно, понятно, без воды, голос у автора классный, хорошо объясняет даже умственно отсталые поймут)
@alex_dudukalo
@alex_dudukalo 3 місяці тому
Cпасибо :) Приятно было прочитать ваш комментарий :)
@botleonid4588
@botleonid4588 5 місяців тому
спасибо
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Спасибо за ваш комментарий🤗
@user-eu2vx4wv5p
@user-eu2vx4wv5p 2 місяці тому
Спасибо большое друг! Очень полезная информация и в общем ролик огонь!👍👍👍 Доступно объесняешь 👍
@ndrewhas
@ndrewhas 7 місяців тому
Спасибо, коммент для продвижения
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо за вашу поддержку 😊
@andrey-frontend
@andrey-frontend 7 місяців тому
Спасибо, Александр) Одно не понравилось, я очень ждал, что вы обнулите отступ h3,но так и не дождался)
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Да, только сейчас заметил, что я это пропустил. Эх, видео уже на канале (( Действительно, верхний отступ нужно было убрать. Очень приятно, что вы внимательно смотрели ролик :)
@baytszy
@baytszy 7 місяців тому
Александр, спасибо за Вашу работу, очень помогает начать. Скажите пожлс у Вас есть видео как сделать окно ввода для комментов и отзывов на сайте?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, спасибо вам за поддержку и комментарий. Смотря, какую именно функциональность вы хотите вложить. Если просто верстка? То у меня есть ролики по верстке форм (но тут нужно отталкиваться от дизайна) Если работа с сервером, то здесь сложнее. Могу предложить вам вариант использовать сервис комментариев. Его очень быстро и просто можно внедрить на сайт. Если вам такой вариант подойдет, конечно: cackle.me/comments
@baytszy
@baytszy 7 місяців тому
Функцию окно для отзыва по нажатию кнопки...@@alex_dudukalo
@JuliaKulinich
@JuliaKulinich 5 місяців тому
Спасибо вам за вашу работу!) Расскажите, пожалуйста, про MVC, лучше вас никто информацию не даст)))☺
@alex_dudukalo
@alex_dudukalo 5 місяців тому
Здравствуйте, Юлия. Спасибо вам. Да, это интересная тема и довольно сложная для новичка. Но я думаю можно попробовать объяснить на простом примере. Думаю, как это можно сделать :) Спасибо за идею.
@AnatolyGradovoy
@AnatolyGradovoy 4 місяці тому
лайк так лайк, не жалко
@user-bt5uv7qg7i
@user-bt5uv7qg7i 7 місяців тому
Спасибо за урок! Получается, что к первой кнопке никак нельзя добавлять отступы?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо вам :) Да, классу btn отступы не задаем. В следующем видео я подскажу, как это сделать через модификатор :)
@user-yp7gw1tq1l
@user-yp7gw1tq1l 7 місяців тому
Расскажите про сбросы стилей в БЭМ, назначения классов для html и body. Отдельное упоминание про универсальный селектор в бэм * { }
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Очень хорошее предложение :) Думаю, обязательно сделаю это в видео с практикой :) Оно будет в серии роликов по БЭМ :)
@relaxdeepsleepmusic3608
@relaxdeepsleepmusic3608 7 місяців тому
Ждём видео про модификатор!!!
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Уже готовлю :)) Скоро будет здесь
@akmalpalvanov4443
@akmalpalvanov4443 4 місяці тому
focus, hover , active.и да я щас посмотрел другое видео чтобы понять как правильно.Пасиб автору за интерактивы🙂
@alex_dudukalo
@alex_dudukalo 4 місяці тому
Спасибо за ваш комментарий🤗
@lagec
@lagec 6 місяців тому
Спасибо за видео! Насколько я знаю, alt у img должен описывать содержимое изображения, то есть в примере с карточкой должно быть описание того, что изображено на картинке, а не просто название ресторана. Поправьте, если я ошибаюсь
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Спасибо за ваш комментарий. Да, совершенно верно, alt описывает то, что изображено в img. Как раз название отеля и описывает изображение. Будет не совсем правильно называть все изображение hotel. Кажется названия отелей делают удачное описание. :)
@lagec
@lagec 5 місяців тому
@@alex_dudukalo тогда, по идее, лучшим альтом для этой картинки было бы что-то вроде "вид из такого-то отеля на Эйфелеву башню", как описание картинки для тех, кто её увидеть не может или если она не подгрузилась
@AnatolyGradovoy
@AnatolyGradovoy 4 місяці тому
порой самая большая проблема - это придумать классы да еще и по бему
@vvks9901
@vvks9901 7 місяців тому
отступы между элементами при diaplay: flex лучше задавать через gap, почему именно margin-right?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здорово, что вы обратили не это внимание :) Да, я сделал отступ margin-left специально для демонстрационной цели. Сделал это для того, что бы блоку с редингом добавить класс и сделать его элементом. Добавил отступ, что бы показать как блокам, являющимися элементами других блоков добавлять стили и отступы :)
@vvks9901
@vvks9901 7 місяців тому
@@alex_dudukalo ок, спасибо за ответ?
@user-pu4fh5oc3n
@user-pu4fh5oc3n 7 місяців тому
👍👍👍
@alex_dudukalo
@alex_dudukalo 7 місяців тому
🔥🤗
@user-jq6tr6rr8v
@user-jq6tr6rr8v 7 місяців тому
Спасибо большое! А разве не обязательно во все альты прописывать ? Почему.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Они будут повторяться. Смысла в этом нет. Например, для доступности, зачем озвучивающему ПО озвучивать один и тот же текст :)
@user-jq6tr6rr8v
@user-jq6tr6rr8v 7 місяців тому
Спасибо, понял.@@alex_dudukalo
@user-lt5ng7wp1q
@user-lt5ng7wp1q 6 місяців тому
Всем доброго времени суток! Написал две кнопки, класс btn применяется к обоим, а выглядят они по разному. Подскажите почему? Кнопка Кнопка body { margin-top: 50px; padding: 0; text-align: center; box-sizing: border-box; } .btn { font-size: 16px; color: white; background-color: #3bca09; border-radius: 10px; padding: 13px 20px; text-decoration: none; border: none; outline-offset: none; /* transition: all 3s ease; */ transition: background-color .3s; } .btn:hover { background-color: #70e944; } .btn:active { background-color: #468f2b; } .btn:focus { outline: 1px solid #68c945; outline-offset: 3px; }
@alex_dudukalo
@alex_dudukalo 6 місяців тому
Здравствуйте, это связано с тем, то у тега button и у тега a по умолчанию браузер уже задает стили. Вам нужно к классу btn добавить дополнитеные стили для сброса: .btn { display: inline-block; outline: none; font-size: 16px; color: white; background-color: #3bca09; border-radius: 10px; padding: 13px 20px; text-decoration: none; border: none; outline-offset: none; /* transition: all 3s ease; */ transition: background-color .3s; }
@user-lt5ng7wp1q
@user-lt5ng7wp1q 6 місяців тому
@@alex_dudukalo Большое спасибо!
@user-zj6gz2lk9b
@user-zj6gz2lk9b 7 місяців тому
Думаю ошиблись вы.active должен быть после focuse
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Да, совершенно верно. Требуется следующий порядок :) focus, hover, active
@user-pb1nl3hy2i
@user-pb1nl3hy2i 7 місяців тому
Когда будет вторая часть ?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Думаю на этой неделе будет. Ближе к выходным или в выходные :) Уже готовлю ролик про модификаторы. Будет интересно
@user-iu4de9lu1s
@user-iu4de9lu1s 3 місяці тому
Можно блоку задавать display:flex; по бэм?
@alex_dudukalo
@alex_dudukalo 3 місяці тому
Здравствуйте. Да, конечно :) запрета на это нет :)
@user-iu4de9lu1s
@user-iu4de9lu1s 3 місяці тому
@@alex_dudukalo Спасибо!
@cedrum8757
@cedrum8757 25 днів тому
Как вы обернули слово в комментарий на 12:17 ?
@alex_dudukalo
@alex_dudukalo 25 днів тому
Вы можете использовать клавиши ) Ctrl+/ - закомментировать / раскомментировать.
@BayOneTee
@BayOneTee Місяць тому
БЭМ не рекомендует сокращения названий классов например button, а не btn
@kylex127
@kylex127 7 місяців тому
нормес
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Спасибо 😊
@user-vz5cn3sp8x
@user-vz5cn3sp8x 7 місяців тому
Кнопка через тег button, вдобавок еще и в классе btn. Это слишком просто, с такими знаниями тестовые задания будут зачастую отклоняться.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте, Глеб. Не совсем понял комментарий. Вы хотите сказать, что класс btn по методологии БЭМ к кнопке лучше не применять ?
@morismustanger6095
@morismustanger6095 7 місяців тому
где модификаторы, видео называется просто БЭ а не БЭМ
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Хотелось в один ролик уместить весь материал, но видео получилось бы еще больше. :) Кажется следующий ролик про модификаторы придется назвать М )))
@morismustanger6095
@morismustanger6095 3 місяці тому
@@alex_dudukalo ахах) спасибо! у вас талант учить!
@webgeekstudio975
@webgeekstudio975 2 місяці тому
Да крутая технология и тоже с ней много лет мучался - пока не плюнул на это говно, все хорошо звучит когда у тебя сраный лендос с 1 карточкой и 1 кнопкой А когда у тебя 20 видов карточек 15-20 типов страниц по несколько десятков секций - и тут все это превращается в получасовое придумывание названий блокам, куча одной и той же писанины - все скатывается в лютейшую капасту из блока в блок. Люди не мучайтесь - плюньте - это тупиковая херня, используйте бустрапы и тайвинды + в современном стеке очень популярны скоупы.
@NURMAN-RORUH
@NURMAN-RORUH 7 місяців тому
Ты по делу можешь трепаться! 1,5 минуты вначале чуши
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Здравствуйте. Подскажите, возможно я вас обидел где-то?
@NURMAN-RORUH
@NURMAN-RORUH 7 місяців тому
@@alex_dudukalo а ты коммент не понял ? Для твоей же пользы оставил его ! Заснешь пока до сути досмотришь. И говори быстрее, а то растягиваешь слова :) Не плач, критика она такая
@alex_dudukalo
@alex_dudukalo 7 місяців тому
@@NURMAN-RORUH Я понял, что мои слова вы называете трепом :) Вот я и спросил, чем я вас обидел? Раз уж вы позволяете себе так говорить. Мне не обидно, а интересно :) Спасибо за комментарий, всегда есть над чем работать.
@NURMAN-RORUH
@NURMAN-RORUH 7 місяців тому
@@alex_dudukalo я назвал первые 1,5 минуты ужасно скучным и бестолковым трепом - потому что это моё мнение ! Ролик же на всеобщее обозрение выставлен, вот и комментируем исходя из собственных переживаний.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
@@NURMAN-RORUH Для меня очень ценно мнение и комментарии. Стараюсь прислушиваться и делать видео лучше. Спасибо вам за это. Да ролик выставлен на всеобщее обозрение и мне приятно, что вы обратили внимание на это. Но я всегда настроен на дружелюбное взаимодействие :) Ваше замечание полезное, но грубое. Простите, но комментирую из собственных переживаний. В следующем видео вступление попробую сделать короче. Думаю, вы правы.
@TheZionjke
@TheZionjke 7 місяців тому
боже, да всем уже давно похер на этот БЭМ..давно никто не парится за это т.к появилось много инснтрументов по типу модулей...
@alex_dudukalo
@alex_dudukalo 7 місяців тому
БЭМ - актуальная методология, которая используется во многих проектах. Особенно на сайтах созданных без сборщиков и фреймворков. Думаю, стоит обратить внимание на эту тему:)
@TheZionjke
@TheZionjke 7 місяців тому
@@alex_dudukalo если дев не потрудился подключить сборщик для сайта, то как говорится грош цена такому деву..))
@amankudaibergen7079
@amankudaibergen7079 7 місяців тому
БЭМ не актуально. Самое главное надо уметь писать кроссплатформенный CSS.
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Многие сайты его используют. Да, согласен кроссплатформенный CSS - важно уметь писать :)
@sergeik1245
@sergeik1245 7 місяців тому
круто спасибо Александр! если еще будет короткие обучалки чтоб в свободное время позалипать 😀🔥🔥🔥🔥🔥
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Обязательно будут :) Спасибо вам за приятный комментарий :)
@18_cm
@18_cm 7 місяців тому
Нормалаиз сбрасывает все стили всех элементов для всех браузеров, а ресет просто обнуляет. Правильно? А какая разница в каком порядке ховер, актив, фокус? Только для эстетики?
@alex_dudukalo
@alex_dudukalo 7 місяців тому
Да, совершенно верно. В этом и есть разница. focus, hover, active должен иметь такой порядок. Что бы hover, мог переназначить стили при фокусе. А active после hover, что бы была возможность при клике переназначить эффекты наведения :)
БЭМ - простыми словами. Часть 2
31:30
Александр Дудукало
Переглядів 4,5 тис.
Повістки у Києві: «Яке право вони мають забирати всіх мужиків?» #війна #мобілізація #військові
00:41
Слідство.Інфо | Розслідування, репортажі, викриття
Переглядів 1,1 млн
😱СНЯЛ ФИКСИКОВ НА КАМЕРУ‼️
00:35
OMG DEN
Переглядів 736 тис.
Именование переменных, классов и методов в коде
25:40
Диджитализируй!
Переглядів 43 тис.
Делаем игру с карточками (Memory) на JavaScript. Урок HTML/CSS/JS
47:21
Уголок фронтендера
Переглядів 1,7 тис.
Magic foherb - БЭМ 4.0  на фоне БЭМ FOHOW.
12:44
Artur Kühl - МЛМ Предприниматель.
Переглядів 3,7 тис.
Методология БЭМ. Теория + пример
15:16
MaxGraph - cайты как страсть
Переглядів 32 тис.
БЭМ методология за 15 минут с практикой на реальном макете!
14:49
HTML Practice - фриланс, web-разработка, нейросети
Переглядів 3,8 тис.
Рыбаки придумали очень интересный способ ловли рыбы
0:24
в ожидании поклевки
Переглядів 593 тис.
НИКОГДА НЕ ПОВТОРЯЙ ЭТО😱🔥 #shorts
1:00
Лина Погорелова
Переглядів 1,7 млн
Windshield Replacement and Repair
0:36
Ayfoo_Its_Otis
Переглядів 7 млн
Плохая прическа😮 (TT oconnells)
0:19
Pieyon
Переглядів 7 млн
MINHA IRMÃ MALVADA CONTRA O GADGET DE TREM DE DOMINÓ 😡 #ferramenta
0:40