Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизни
ฝัง
- เผยแพร่เมื่อ 26 มิ.ย. 2024
- Методология БЭМ это аббревиатура слов блок, элемент, модификатор. Эти объекты и являются основой всей методологии. Основанная в середине 2000х компанией Яндекс, методология БЭМ - всего лишь одна из множества подобных методологий, однако ей удалось получить серьезную популярность. В основе БЭМ лежит принцип разделения интерфейса на независимые блоки, что позволяет легко и быстро выполнять верстку любой сложности и повторно использовать уже существующий код. Сложно? Покажу пример верстки по БЭМ методологии. Пойдем разбираться!
Архив с файлами урока качай по ссылке: fls.guru/files/tutorials/bem.zip
Верстка макета из урока:
• Верстка сайта из PSD с...
Больше информации по БЭМ
ru.bem.info/methodology/quick...
Настрока плагина eCSStractor для копирования классов по БЭМ
fls.guru/files/ecsstractor.zip
Содержание:
00:00 - Вступление
01:04 - Блок
03:00 - Элемент
06:02 - Модификатор
07:10 - Микс
08:21 - Практический пример
Поддержать канал: / freelancerlifestyle
Instagram: / freelancer.lifestyle
Facebook: / freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками!
Ссылка на канал: / freelancerlifestyle
«Фрилансер по жизни». Живи, а работай в свободное время! ©
#фрилансерпожизни #обучение #верстка
За 17 минут понял больше , чем если бы сам копал пару дней. Слов нет - спасибо огромное за уроки.
Спасибо! Рад что полезно!
Полностью согласен
Спасибо!
2 дня изучала БЭМ, поняла совсем немного. За 17 минут видео практически всё стало понятно. Спасибо за понятное объяснение)
Пожалуйста!
Не посчитай за камень в твой огород, но по бэму на их сайте-документации все изложено, все что нужно - прочесть)
Я буду писать тебе коменты что бы поднимать твоим видосам рейтинг.... этот проект должен жить
Спасибо!
Как мне нравятся эти фразы:"пойдем покажу","пойдем разбираться". :)
Я рад)
Брат, спасибо тебе за видео, ты очень сильно мотивировал меня на начале пути в далеком 20 году) сейчас уже 22 год и я фронт разработчик на реакте, спасибо тебе за уроки по верстке, ты очень хорошо объясняешь, мой сеньор очень удивился когда я показал как я умею верстать, без тебя бы не получилось, спасибо тебе здоровья тебе и твоим близким, живи! а работай в свободное время
как долго учился и как нашел работу?
@@topchik_tyomchik учился год, нашел работу не так легко) реальные задачи очень отличаются от видосиков на ютубе)
@@thecatwrites9731 дружище, поздравляю! Скажи плиз, а учился каждый день? И самостоятельно учился или на курсы записался какие?
@@rza5041 ты знаешь, брат каждый день минимум час кодинга, не чтения, не просмотр видео а кодинга! на курсы никакие и не надеюсь, это все выкачка $!
вёрстку узнал тут, потом пробовал верстать вместе с автором по видео "верстка с нуля" JS изучил на IT kamasutra
там больше чем база есть + реакт
Друг подскажи как ты распланировал свою учебу?
Четко, понятно, без воды; и теория, и практика; грамотная речь и произношение...
Это большая редкость.
Спасибо большое! Рад что полезно!
ахаха произношение хорошее ааааааа😂
В последних видео ещё лучше!
Если честно, хожу на платные занятия, а тут все тоже самое, но бесплатно. Люди чел делает ТОП Контент, спасибо большое тебе.
Спасибо!
В интернете много бесплатного, особенно по программированию, просто новичку сложно с ориентироваться и выстроить для себя план обучения. На курсах уже структурировано подаётся информация, для подготовки в определенной области. Плюс домашним задания какие то обязанности.
Очередная благодарность за твой труд!
Даже на платных курсах такое не объясняют. Спасибо 🥺
Очень полезное видео, коротко и по существу. Все понятно, лучше чем читать доку БЭМ, которую я читал 40 минут и появилось больше вопросов, чем ответов. Автору респект! За такое время так объяснить - это талант
Супер! Я рад что полезно!
Сейчас учусь на курсах по веб-разработке и решил повторно посмотреть ваше видео по БЭМ. Теперь намного лучше понимаю как работать с методологией. В очередной раз отмечаю для себя, ваши уроки - объективно, ЛУЧШИЕ!
Спасибо, учитель 🙏
Методология БЭМ конечно в итоге круче, но за короткое время выложить суть и фишки ее использования это КЛАСС!!!
У тебя талант разбираться и доносить это кратко и очень доходчиво. Ты нам нужен...
Спасибо, Женя!!! Ты лучший!!! Спасибо от души и дай тебе вселенная всего всего!!!
это фантастическая информация! Низкий поклон!
Просто нет слов, чтобы описать в каком я восторге, это просто нечто. Смотрю и восхищаюсь качеством подачи материала. Респект!
Я занимаюсь сам и сейчас полный "БУМ" в голове от разной информации мне по советовали по смотреть этот ролик и я доволен что хоть немного структурировал то что знаю. Удачи вам в новых проектах!
Спасибо за твой труд! Твои уроки дают почувствовать себя на много уверенней.
однозначно лайк хоть и сложно, но это уже другая история
За 17 минут понял больше , чем читал про сам БЭМ. Слов нет - спасибо огромное за уроки.
Евгений, спасибо за Ваши уроки! Супер!
Прошло два года но твои уроки приносят пользу до сих пор СПАСИБО
Ценю твой ЛАЙК и КОММЕНТ!
Содержание:
00:00 - Вступление
01:04 - Блок
03:00 - Элемент
06:02 - Модификатор
07:10 - Микс
08:21 - Практический пример
Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
Telegram канал: t.me/freelancer_lifestyle или teleg.run/freelancer_lifestyle
Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
Instagram: instagram.com/freelancer.lifestyle/
Facebook: facebook.com/freelancerlifestyle/
Спасибо большое за урок, но я не поял момент когда использовать блок или элемент 5:38, Спасибо большое за урок! Ваши занятия делают большой вклад в программировании!!!
Спасибо! Пусть Бог Вас благословит за Ваше добро и желание делиться знаниями с другими!
Пожалуйста! Я рад что полезно!
До чего же понятно, аж до слез. До этого читал и смотрел других блогеров, но понял только здесь. Огромное спасибо из 2021г.
Какой же Вы умница👍👍👍Огромное спасибо за полезный урок!!!
Объяснение деталей на высшем уровне, вместе с реальными примерами просто идеально, лайк однозначно.
Спасибо, старался!
Мне всегда нравиться когда ты говоришь
«Например» потому что не не все дают премьеры тому чему учат .. большой лайк тебе Жека
И много много здоровья
Женя, спасибо! за что люблю твои уроки так это за то, что все понятно объясняешь и без лишнего!!! Твой канал просто находка)))
Отлично! Всё понятно, а главное - по делу и без воды, что является редкостью. До этого смотрел другое часовое видео и остались вопросы. Тут всё по полочкам. Буду практиковаться. Спасибо автору.
Непрерывно смотрю ваши уроки, у вас настоящий талант преподавания, информация без грамма "воды", всегда думал что верстка это трудно и суждено постигнуть не каждому...Но ваш курс оказался самым лучшим, понятным и качественным из всех что я видел ,счастья и здоровья вам, спасибо за знания)))
Сначала была теория, которая показалась мне невыносимо скучной, но дальше.... ....Дальше Женя приготовил для нас настоящий заряд качественного, высоко информативного контента !!! 👀 Спасибо, что делишься с нами своими знаниями !!!
Пожалуйста!
Огромное вам спасибо, учусь по вашему плейлисты по фронтэнду. Уверен продолжу по вашему каналу, все что есть просмотрю и разберу, огромное спасибо и продолжайте радовать так же нас очень простыми и доступными для понимания видосами👍🔥
Доходчиво, предельно ясно!)Спасибо за труды
Огромную работу делаешь, за 17 минут понял больше чем за час вебинара...
Спасибо!)
Спасибо большое за урок, по методологии бэм всё понятно. Попала на данный урок из плейлиста курса, так как данный урок стоит перед flexbox, я ничего не поняла в выстраивании row, но надеюсь смогу понять, посмотрев следующие уроки курса. Спасибо за полезный и качественный контент
Спасибо Человек! Очень понятно и доступно объяснили. Рада, что нашла Вас
Дружище, спасибо большое, уроки очень классные, под твоим руководством обучение пролетает максимально быстро!
я дизайнер, и неудержался, начал верстать свой старый дизайн для тренировки, не досмотрев все видосы. сейчас смотрю про бэм и понимаю, что успел уже свой бэм придумать :D
действительно, надо все делать по стандарту, так как мало ли кто еще в будущем залезет в код сайта
Дождался уже начал переживать)))) все супер !!! Все на высшем пилотаже !!!
Спасибо! Стараюсь)
Спасибо огромное !Теперь наконец-то все становится понятно от куда и как все эти названия блоков ,элементов и модификаторов появляются!!Все по полочкам в голове разложилось.
Спасибо, вы делаете мою жизнь лучше!
Самый мой любимый образовательный канал в ютубе. Хотел сделать себе конспект, а тут подгон в виде шпаргалки. Огромное спасибо!!!
Чётко и внятно с показательным примером. Круто. Спасибо за Ваши уроки по верстке! Полезно.
Просто лучший!!!! Храни тебя Господь!
Шикарно! Лучшее объяснение БЭМ методологии!
Понятно и без лишней воды. Это ДАР, когда можешь объяснить сложное так легко и понятно. Спасибо!
Пожауйста!
Спасибо, за видео! Вся информация по делу! Огонь!!
Пожалуйста!
Спасибо автору! Невозможно не оставить коммент такому замечательному человеку! Покупал платные уроки на юдэми - не сравнятся с этими уроками, это лучшее, что можно было создать! Талантище просто
Какой же Вы хороший преподаватель👍👍👍👍 Ваши видео просто золото, огромное спасибо за труды и доступность такого материала👍👍
Спасибо, быстро повторил материал с официального сайта методологии БЭМ. Чётко. Разделено на секции (само видео), без воды и всё понятно, молодец!
Спасибо!
Круто, молодец, как всегда по делу! Новые знания + в копилку)
Спасибо! Стараюсь)
Быстро, качественно, понятно! Это просто нечто! Всё максимально доступно объяснил, лучший!
Спасибо! Я рад!
Формат подачи с примерами повышает эффективность в разы! Спасибо, будем разбираться.
Интуитивно я верстала по БЭМу) спасибо, что все разложили по полочкам+отдельное спасибо за практику и за объяснение организации папок с картинками. Это очень важно, но слышу об этом впервые.
Я очень рад что это полезно!
Настолько сжато и понятно, просто супер. Материалы в придачу. Что еще надо? Смотри , верстай и ставь класс. Проще не бывает
Спасибо!
Очень круто!!!Спасибо за урок!!!!Нет слов,только одни положительные эмоции.
Лучше, чем в универе ! Спасибо, НАШ ДОРОГОЙ И ЗАМЕЧАТЕЛЬНЫЙ УЧИТЕЛЬ!
Тот момент, когда в «рекомендациях» появилось что-то годное.
Спасибо!
Полезность этого видео зашкаливает. 11 из 10
Спасибо! Рад что полезно! 😊
Спасибо огромное!!! Это лучшее объяснение материала👍👍👍❤
Спасибо за ваш труд! Особенно нравится доступная подача материала
Очень классно объяснил, спасибо. Интересный формат, без воды и с хорошим монтажом
Спасибо! Я рад!
Жека, благодарю за контент 🤓 Как всегда все максимально круто и доступно объяснил 👍🔥🔥🔥
Пожалуйста!
Cпасибо вам за ваши старания! Ваши уроки лучшие!)
Мужик твои видео ещё несколько лет будут пересматривать , я научился наконец верстать благодаря тебе
Спасибо! )
Приятно, когда о технологии рассказывает человек, который сам её понимает.
Смотрел до этого пару уроков по БЭМ, но так и не понял некоторых вещей, например, как задавать модификаторы с точки зрения синтаксиса. А тут наоборот, всё по полочкам, супер! ) Лайк, и добавлю в избранные, чтобы использовать как шпаргалку :)
Супер! Я рад!
Сложная, но очень интересная тема. Жека, спасибо огромное, ждал это видос!
Круть, всегда будет под рукой!
Как всегда на высоте !Всё чётко и понятно!
Магия... Очень интересно наблюдать за работой мастера!
Специально терпел и не смотрел на эту тему других сенсеев! Жека как всегда рассказал все понятным языком! Спасибо огромное!) Ждем новый уроков!
Спасибо! Ценю!
Господи, да он просто перечитал документацию, слово в слово
@@r45her иди тогда сам к себе на канал, и также перечитай эту документацию так, чтобы всем было понятно, раз это так легко.
@@thththththth_ но официальная документация правда лёгкая. Не сложнее этого видео. Там буквально написано то же самое
@@r45her хз, видео всегда понятнее. Тем более он на примере показывал
Вот за этот ролик отдельное спасибо ) А то читал и оф. документацию, и на разных форумах, но как-то до конца для себя не разобрался.
Пожалуйста!
Полезный контент, к тому же выходит очень регулярно. И темы довольно важные.
Спасибо!
Пожалуйста!
Женя, СПАСИБО за уроки, более понятно объяснить невозможно!!!
Пожалуйста, рад что полезно!
Тем временем осталось 80 лайкосов до стрима с мастер-классом по верстке макета из урока :) Вперед!
Фрилансер по жизни - IT и фриланс, было уже?
Настройка плагина - ссылка не работает!
@@gopher_school внутренний не влияет на окружение
@@FreelancerLifeStyle но еще кто-то не буду показывать пальцем, заFLEXил элементы)) хотя по ходу уроков мы их еще не прошли))
Когда слушаешь что нужно 200 лайков , а на видосе уже 27к лайков 👌🏼
Спасибо, как всегда урок очень полезен!
Пожалуйста!
Крайне полезное видео по БЭМ. Рекомендую!
Этот дядя Женя самый лучший! Спасибо!
Сразу стало все ясно и понятно, подписка, лайк и колокольчик!!
Я рад!
Спасибо большое, все понятно объяснил, удачи!
Пожалуйста!
Спасибо) Всем кто делает бесплатные уроки Respect!
Вот, что значит талант! Талантище! Спасибо стомильен раз!!!!
Не смотря на то что видео было опубликовано 2 года назад, они все ещё живут и помогают людям, в том числе и мне..)
Спасибо большое за ваш усерднвй труд🙌..
Супер полезно, я верстаю уже давно, и много. Но так, для себя или знакомых. Но как получил работу в студии, решил исправить свои ошибки и перейти на всеобщий метод верстки. Такое короткое видео, а столько полезной информации... Спасибо большое, теперь главное переучить себя и выработать привычку.
Спасибо! Верно, нужно просто немного практики!
🥰Просто нет слов!!! 😊Стараюсь посмотреть каждое видео, 🤗 некоторые пересматриваю😇 и первым делом смотрю поставил ли я лайк, 😅если нет, ставлю. И со спокойной душой продолжаю просмотр. 🤩 Спасибочки!!! Бесконечно БЛАГОДАРЕН Автору🤗🤗🤗
Подача материала, четкая структура + практическое закрепление, хороший монтаж. Спасибо за полезный ролик!
Пожалуйста!
это просто шедевр! такая сложная тема, так отлично обьяснена! даже я тугодум начинаю понимать! спасибо тебе огромное! Всех благ тебе и твоим близким!
Спасибо за информацию, очень доступно
Пожалуйста!
Спасибо тебе огромные, автор! Единственный человек, который нормально объяснил БЭМку.
Хочеться подякувати за кожне відео і особливо за практику після уроків. Це дуже крутий підхід. Дякую)
Отличное объяснение самой важной базовой вещи. Ответы можно найти на любой вопрос: как сделать то и это. Но вот правильная структура - основа всего. Спасибо за объяснение.
Пожалуйста!
Передоз годнотой 🔥
Спасибо! Рад что полезно! 👍🤘
Лучший курс из всех, что видел!! Успехов в новом контенте и огромное спасибо за знания.
Пожалуйста!
Огромное спасибо! Коротко, доступно, понятно и по делу!
Пожалуйста!
Господи, спасибо за уроки! Научиться бы так быстро и четко кодить, как вы!)
Тот случай, когда купила платный курс в другом месте, но заглядываю к вам, потому что тут больше нравится даже на бесплатном материале))
Спасибо, я рад что нравится!
Про платный курс вы в точку отметили!) У меня такая же ситуация))
@@Angelina_8833 XD Тоже самое, пошла на курсы, в итоге смотрю тут.
Аналогично! Хожу на курсы😱, а учусь здесь!😍👍👍👍 спасибо огромное за доступную информацию без воды!
У меня нет слов. Надеюсь когда-нибудь тебя увижу, пожму руку и скажу "спасибо".
Успехов, счастья и здоровья. Рекомендовать буду тебя всем своим знакомым, мечтающих работать в It.
Спасибо!
Супер. Коротко, ясно и наглядно!!!
Огромное спасибо за уроки! Фрилансер по жизни - ты топчик!
Ну наконец то до меня дошло, что такое БЭМ. Т.к. я визуал мне очень сложно разобраться в текстовой документации. ЖЕКА, СПАСИБО за очередной видос, который ставит всё на свои места и позволяет легко понять за 15 минут то, что изучалось бы не один день. И просьба: сделай мастер-класс по этому макету тоже, независимо от количества лайков. ПОЖАЛУЙСТААААА!!!
Спасибо! Сделаю) Но все же надеюсь что лайки наберутся 😅
Спасибо огромное за урок))) шикарный пример и теория
Спасибо! Рад что получилось полезно! 👍🤘
@@FreelancerLifeStyle Это тебе спасибо, что делишься опытом своим и навыками)
Очень крутая подача, всё ясно и понятно) Спасибо большущее!)
Спасибо, все встало на свои места и оказалось что я все делал правильно) хотя про БЭМ смотрел один раз и то, когда только начинал
Отлично