Методология БЭМ за 17 минут. Пример верстки по БЭМ методологии // Фрилансер по жизни
Vložit
- čas přidán 11. 06. 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 минут видео практически всё стало понятно. Спасибо за понятное объяснение)
Пожалуйста!
Не посчитай за камень в твой огород, но по бэму на их сайте-документации все изложено, все что нужно - прочесть)
Я буду писать тебе коменты что бы поднимать твоим видосам рейтинг.... этот проект должен жить
Спасибо!
Как мне нравятся эти фразы:"пойдем покажу","пойдем разбираться". :)
Я рад)
я дизайнер, и неудержался, начал верстать свой старый дизайн для тренировки, не досмотрев все видосы. сейчас смотрю про бэм и понимаю, что успел уже свой бэм придумать :D
действительно, надо все делать по стандарту, так как мало ли кто еще в будущем залезет в код сайта
Четко, понятно, без воды; и теория, и практика; грамотная речь и произношение...
Это большая редкость.
Спасибо большое! Рад что полезно!
ахаха произношение хорошее ааааааа😂
В последних видео ещё лучше!
Если честно, хожу на платные занятия, а тут все тоже самое, но бесплатно. Люди чел делает ТОП Контент, спасибо большое тебе.
Спасибо!
В интернете много бесплатного, особенно по программированию, просто новичку сложно с ориентироваться и выстроить для себя план обучения. На курсах уже структурировано подаётся информация, для подготовки в определенной области. Плюс домашним задания какие то обязанности.
Сейчас учусь на курсах по веб-разработке и решил повторно посмотреть ваше видео по БЭМ. Теперь намного лучше понимаю как работать с методологией. В очередной раз отмечаю для себя, ваши уроки - объективно, ЛУЧШИЕ!
Спасибо, учитель 🙏
Брат, спасибо тебе за видео, ты очень сильно мотивировал меня на начале пути в далеком 20 году) сейчас уже 22 год и я фронт разработчик на реакте, спасибо тебе за уроки по верстке, ты очень хорошо объясняешь, мой сеньор очень удивился когда я показал как я умею верстать, без тебя бы не получилось, спасибо тебе здоровья тебе и твоим близким, живи! а работай в свободное время
как долго учился и как нашел работу?
@@topchik_tyomchik учился год, нашел работу не так легко) реальные задачи очень отличаются от видосиков на ютубе)
@@thecatwrites9731 дружище, поздравляю! Скажи плиз, а учился каждый день? И самостоятельно учился или на курсы записался какие?
@@rza5041 ты знаешь, брат каждый день минимум час кодинга, не чтения, не просмотр видео а кодинга! на курсы никакие и не надеюсь, это все выкачка $!
вёрстку узнал тут, потом пробовал верстать вместе с автором по видео "верстка с нуля" JS изучил на IT kamasutra
там больше чем база есть + реакт
Друг подскажи как ты распланировал свою учебу?
Методология БЭМ конечно в итоге круче, но за короткое время выложить суть и фишки ее использования это КЛАСС!!!
У тебя талант разбираться и доносить это кратко и очень доходчиво. Ты нам нужен...
Ценю твой ЛАЙК и КОММЕНТ!
Содержание:
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, Спасибо большое за урок! Ваши занятия делают большой вклад в программировании!!!
Очень полезное видео, коротко и по существу. Все понятно, лучше чем читать доку БЭМ, которую я читал 40 минут и появилось больше вопросов, чем ответов. Автору респект! За такое время так объяснить - это талант
Супер! Я рад что полезно!
Просто нет слов, чтобы описать в каком я восторге, это просто нечто. Смотрю и восхищаюсь качеством подачи материала. Респект!
Тем временем осталось 80 лайкосов до стрима с мастер-классом по верстке макета из урока :) Вперед!
Фрилансер по жизни - IT и фриланс, было уже?
Настройка плагина - ссылка не работает!
@@gopher_school внутренний не влияет на окружение
@@FreelancerLifeStyle но еще кто-то не буду показывать пальцем, заFLEXил элементы)) хотя по ходу уроков мы их еще не прошли))
Когда слушаешь что нужно 200 лайков , а на видосе уже 27к лайков 👌🏼
Тот момент, когда в «рекомендациях» появилось что-то годное.
Спасибо!
Я занимаюсь сам и сейчас полный "БУМ" в голове от разной информации мне по советовали по смотреть этот ролик и я доволен что хоть немного структурировал то что знаю. Удачи вам в новых проектах!
Понятно и без лишней воды. Это ДАР, когда можешь объяснить сложное так легко и понятно. Спасибо!
Пожауйста!
Интуитивно я верстала по БЭМу) спасибо, что все разложили по полочкам+отдельное спасибо за практику и за объяснение организации папок с картинками. Это очень важно, но слышу об этом впервые.
Я очень рад что это полезно!
Самый мой любимый образовательный канал в ютубе. Хотел сделать себе конспект, а тут подгон в виде шпаргалки. Огромное спасибо!!!
Не смотря на то что видео было опубликовано 2 года назад, они все ещё живут и помогают людям, в том числе и мне..)
Спасибо большое за ваш усерднвй труд🙌..
Огромную работу делаешь, за 17 минут понял больше чем за час вебинара...
Спасибо!)
За 17 минут понял больше , чем читал про сам БЭМ. Слов нет - спасибо огромное за уроки.
Забавно слушать в конце видео: "Если это видео наберет 200 лайков.." и смотришь в низ, а там 8к, ну в принципе тоже не плохо
ага) ну, растем!
@@fpv_cinematic2460 Смотришь, а там 18к))
@@user-lc9zz6jf3q смотришь, а уже 20к!
Сначала была теория, которая показалась мне невыносимо скучной, но дальше.... ....Дальше Женя приготовил для нас настоящий заряд качественного, высоко информативного контента !!! 👀 Спасибо, что делишься с нами своими знаниями !!!
Пожалуйста!
Мне всегда нравиться когда ты говоришь
«Например» потому что не не все дают премьеры тому чему учат .. большой лайк тебе Жека
И много много здоровья
это просто шедевр! такая сложная тема, так отлично обьяснена! даже я тугодум начинаю понимать! спасибо тебе огромное! Всех благ тебе и твоим близким!
Даже на платных курсах такое не объясняют. Спасибо 🥺
Чётко и внятно с показательным примером. Круто. Спасибо за Ваши уроки по верстке! Полезно.
Настолько сжато и понятно, просто супер. Материалы в придачу. Что еще надо? Смотри , верстай и ставь класс. Проще не бывает
Спасибо!
"Если видео наберет 200 лайков"
> набирает 7.5 тысяч.
Ты очень крутой, спасибо
Хех, пожалуйста!
8.8
дааа, на август 2020 9 тысяч лайков!!!!!! Спасибо!
Уже 9,5 тысяч)
Ноябрь 2020 -11к
Непрерывно смотрю ваши уроки, у вас настоящий талант преподавания, информация без грамма "воды", всегда думал что верстка это трудно и суждено постигнуть не каждому...Но ваш курс оказался самым лучшим, понятным и качественным из всех что я видел ,счастья и здоровья вам, спасибо за знания)))
Очень классно объяснил, спасибо. Интересный формат, без воды и с хорошим монтажом
Спасибо! Я рад!
Специально терпел и не смотрел на эту тему других сенсеев! Жека как всегда рассказал все понятным языком! Спасибо огромное!) Ждем новый уроков!
Спасибо! Ценю!
Господи, да он просто перечитал документацию, слово в слово
@@r45her иди тогда сам к себе на канал, и также перечитай эту документацию так, чтобы всем было понятно, раз это так легко.
@@thththththth_ но официальная документация правда лёгкая. Не сложнее этого видео. Там буквально написано то же самое
@@r45her хз, видео всегда понятнее. Тем более он на примере показывал
однозначно лайк хоть и сложно, но это уже другая история
Привіт, Жека! Вивчаю фронтенд з нуля і все так добре розумію. дякуючи твоїм урокам. Це я вдруге почав вивчати. В перший було тяжко, тому що не було послідовності в навчанні. Але, на щастя, натрапив на тебе і почав знову . Щиро дякую тобі!
🥰Просто нет слов!!! 😊Стараюсь посмотреть каждое видео, 🤗 некоторые пересматриваю😇 и первым делом смотрю поставил ли я лайк, 😅если нет, ставлю. И со спокойной душой продолжаю просмотр. 🤩 Спасибочки!!! Бесконечно БЛАГОДАРЕН Автору🤗🤗🤗
Очередная благодарность за твой труд!
Отличная методология. Постоянно возникают сложности с naming классов. А с этой методологией этот процесс упрощается. В первые от тебя об этой методологии услышал. Периодически пересматриваю твои видео. Спасибо за простое объяснение.
Супер! Все никак не мог понять, можно ли блок В элемент вкладывать. читал офиц-мануал и потратил часа 2. посмотрел Ваше видео во всем разобрался! У Вас талант преподавать! Спасибо огромное!
Спасибо большое за урок, по методологии бэм всё понятно. Попала на данный урок из плейлиста курса, так как данный урок стоит перед flexbox, я ничего не поняла в выстраивании row, но надеюсь смогу понять, посмотрев следующие уроки курса. Спасибо за полезный и качественный контент
Объяснение деталей на высшем уровне, вместе с реальными примерами просто идеально, лайк однозначно.
Спасибо, старался!
это фантастическая информация! Низкий поклон!
спасибо за видео!!! 17 минут - и все разложено по полочкам в моей голове. лучший канал!
Спасибо автору! Невозможно не оставить коммент такому замечательному человеку! Покупал платные уроки на юдэми - не сравнятся с этими уроками, это лучшее, что можно было создать! Талантище просто
Спасибо! Пусть Бог Вас благословит за Ваше добро и желание делиться знаниями с другими!
Пожалуйста! Я рад что полезно!
Ну наконец то до меня дошло, что такое БЭМ. Т.к. я визуал мне очень сложно разобраться в текстовой документации. ЖЕКА, СПАСИБО за очередной видос, который ставит всё на свои места и позволяет легко понять за 15 минут то, что изучалось бы не один день. И просьба: сделай мастер-класс по этому макету тоже, независимо от количества лайков. ПОЖАЛУЙСТААААА!!!
Спасибо! Сделаю) Но все же надеюсь что лайки наберутся 😅
Быстро, качественно, понятно! Это просто нечто! Всё максимально доступно объяснил, лучший!
Спасибо! Я рад!
Прошло два года но твои уроки приносят пользу до сих пор СПАСИБО
Господи, спасибо за уроки! Научиться бы так быстро и четко кодить, как вы!)
Тот случай, когда купила платный курс в другом месте, но заглядываю к вам, потому что тут больше нравится даже на бесплатном материале))
Спасибо, я рад что нравится!
Про платный курс вы в точку отметили!) У меня такая же ситуация))
@@Angelina_8833 XD Тоже самое, пошла на курсы, в итоге смотрю тут.
Аналогично! Хожу на курсы😱, а учусь здесь!😍👍👍👍 спасибо огромное за доступную информацию без воды!
Но комментс. Пишу коммент просто ради результативности :)
Приму за комлиментос)
Огромное вам спасибо, учусь по вашему плейлисты по фронтэнду. Уверен продолжу по вашему каналу, все что есть просмотрю и разберу, огромное спасибо и продолжайте радовать так же нас очень простыми и доступными для понимания видосами👍🔥
До чего же понятно, аж до слез. До этого читал и смотрел других блогеров, но понял только здесь. Огромное спасибо из 2021г.
Спасибо! )
Приятно, когда о технологии рассказывает человек, который сам её понимает.
Смотрел до этого пару уроков по БЭМ, но так и не понял некоторых вещей, например, как задавать модификаторы с точки зрения синтаксиса. А тут наоборот, всё по полочкам, супер! ) Лайк, и добавлю в избранные, чтобы использовать как шпаргалку :)
Супер! Я рад!
Спасибо, быстро повторил материал с официального сайта методологии БЭМ. Чётко. Разделено на секции (само видео), без воды и всё понятно, молодец!
Спасибо!
Хочеться подякувати за кожне відео і особливо за практику після уроків. Це дуже крутий підхід. Дякую)
Спасибо за твой труд! Твои уроки дают почувствовать себя на много уверенней.
Круто, молодец, как всегда по делу! Новые знания + в копилку)
Спасибо! Стараюсь)
Дождался уже начал переживать)))) все супер !!! Все на высшем пилотаже !!!
Спасибо! Стараюсь)
Евгений, спасибо за Ваши уроки! Супер!
Лучше, чем в универе ! Спасибо, НАШ ДОРОГОЙ И ЗАМЕЧАТЕЛЬНЫЙ УЧИТЕЛЬ!
У меня нет слов. Надеюсь когда-нибудь тебя увижу, пожму руку и скажу "спасибо".
Успехов, счастья и здоровья. Рекомендовать буду тебя всем своим знакомым, мечтающих работать в It.
Спасибо!
Вот за этот ролик отдельное спасибо ) А то читал и оф. документацию, и на разных форумах, но как-то до конца для себя не разобрался.
Пожалуйста!
Доходчиво, предельно ясно!)Спасибо за труды
Какой же Вы умница👍👍👍Огромное спасибо за полезный урок!!!
Полезность этого видео зашкаливает. 11 из 10
Спасибо! Рад что полезно! 😊
Супер полезно, я верстаю уже давно, и много. Но так, для себя или знакомых. Но как получил работу в студии, решил исправить свои ошибки и перейти на всеобщий метод верстки. Такое короткое видео, а столько полезной информации... Спасибо большое, теперь главное переучить себя и выработать привычку.
Спасибо! Верно, нужно просто немного практики!
Дружище, спасибо большое, уроки очень классные, под твоим руководством обучение пролетает максимально быстро!
Женя, спасибо! за что люблю твои уроки так это за то, что все понятно объясняешь и без лишнего!!! Твой канал просто находка)))
Последующие 17 минут ожидаются быть великолепными.
Ковальский, приступаем :D
Круть! Уверен будет полезно)
Такую годноту создавать незаконно )))
Хех, спасибо!
Полезный контент, к тому же выходит очень регулярно. И темы довольно важные.
Спасибо!
Пожалуйста!
Спасибо, вы делаете мою жизнь лучше!
Прохожу курсы front-end, за 4,5 часа вообще не поняла о чем речь. За 17 минут поняла и уже сделала домашку. Спасибо огромное. Понятно даже совсем новичкам.
Супер, я очень рад! Буду благодарен за рекомендацию канала!
Сложная, но очень интересная тема. Жека, спасибо огромное, ждал это видос!
Круть, всегда будет под рукой!
Спасибо, Женя!!! Ты лучший!!! Спасибо от души и дай тебе вселенная всего всего!!!
Спасибо Человек! Очень понятно и доступно объяснили. Рада, что нашла Вас
Спасибо, за видео! Вся информация по делу! Огонь!!
Пожалуйста!
Жека, благодарю за контент 🤓 Как всегда все максимально круто и доступно объяснил 👍🔥🔥🔥
Пожалуйста!
Какой же Вы хороший преподаватель👍👍👍👍 Ваши видео просто золото, огромное спасибо за труды и доступность такого материала👍👍
Подача материала, четкая структура + практическое закрепление, хороший монтаж. Спасибо за полезный ролик!
Пожалуйста!
Спасибо, как всегда урок очень полезен!
Пожалуйста!
Очень круто рассказываешь, лайк и подписка!) удивительно, что канал так слабо раскручен, 65к подписчиков только. Но, думаю, все впереди :)
Я на это надеюсь)
Жека как всегда все супер )) У меня тут истерика началась на 3 часа в настройках шарил, ничего не работает думаю че за лажа, а по итогу понял что побежал впереди паровоза и не посмотреть урок про предпроцессоры SASS/SCSS ! Так что народ кто только нашел этот крутой канал смотрим ролики по мере их выходов ! Пойду что ли чайка заварю успокоюсь ))
Отлично! Всё понятно, а главное - по делу и без воды, что является редкостью. До этого смотрел другое часовое видео и остались вопросы. Тут всё по полочкам. Буду практиковаться. Спасибо автору.
Спасибо, все встало на свои места и оказалось что я все делал правильно) хотя про БЭМ смотрел один раз и то, когда только начинал
Отлично
Передоз годнотой 🔥
Спасибо! Рад что полезно! 👍🤘
Спасибо огромное !Теперь наконец-то все становится понятно от куда и как все эти названия блоков ,элементов и модификаторов появляются!!Все по полочкам в голове разложилось.
Лучший курс из всех, что видел!! Успехов в новом контенте и огромное спасибо за знания.
Пожалуйста!
Спасибо большое, все понятно объяснил, удачи!
Пожалуйста!
Отличное объяснение самой важной базовой вещи. Ответы можно найти на любой вопрос: как сделать то и это. Но вот правильная структура - основа всего. Спасибо за объяснение.
Пожалуйста!
Мужик твои видео ещё несколько лет будут пересматривать , я научился наконец верстать благодаря тебе
Спасибо за ваш труд! Особенно нравится доступная подача материала
Сразу стало все ясно и понятно, подписка, лайк и колокольчик!!
Я рад!
Спасибо за информацию, очень доступно
Пожалуйста!
Магия... Очень интересно наблюдать за работой мастера!
Формат подачи с примерами повышает эффективность в разы! Спасибо, будем разбираться.
Спасибо огромное за урок))) шикарный пример и теория
Спасибо! Рад что получилось полезно! 👍🤘
@@FreelancerLifeStyle Это тебе спасибо, что делишься опытом своим и навыками)
Отличный материал и подача на высоте, лайк👍
Возможно что-то почерпну для себя
Спасибо!
Сидел, читал про БЭМ и многое для меня было как японский рецепт какого-нибудь блюда. Думаю дай гляну что на ютубе есть и наткнулся на это. Всё чётко, ясно и без излишеств! Спасибо!!! Подписался.
Знал что это в общих чертах, но так и не находил времени разобраться окончательно. Жека спасибо за твое время! Ты суперклассный!!!
Спасибо!
Жека, огромное спасибо ٩(｡•́‿•̀｡)۶
У тебя как в Гарварде на CS50: не только все популярно объяснятся, но и предоставляются конспекты по каждому уроку ʕ ᵔᴥᵔ ʔ