Что такое бэм методология смотреть последние обновления за сегодня на .
Методология БЭМ это аббревиатура слов блок, элемент, модификатор. Эти объекты и являются основой всей методологии. Основанная в середине 2000х компанией Яндекс, методология БЭМ - всего лишь одна из множества подобных методологий, однако ей удалось получить серьезную популярность. В основе БЭМ лежит принцип разделения интерфейса на независимые блоки, что позволяет легко и быстро выполнять верстку любой сложности и повторно использовать уже существующий код. Сложно? Покажу пример верстки по БЭМ методологии. Пойдем разбираться! Архив с файлами урока качай по ссылке: 🤍 Верстка макета из урока: 🤍 Больше информации по БЭМ 🤍 Настрока плагина eCSStractor для копирования классов по БЭМ 🤍 Содержание: 00:00 - Вступление 01:04 - Блок 03:00 - Элемент 06:02 - Модификатор 07:10 - Микс 08:21 - Практический пример Поддержать канал: 🤍 Instagram: 🤍 Facebook: 🤍 Telegram канал: 🤍 или 🤍 Меня зовут Женя Андриканич, я IT - специалист, занимаюсь разработкой сайтов. На этом канале, я регулярно и в максимально доступном формате буду делиться с тобой своим опытом, наработками, секретами и лайфхаками! Ссылка на канал: 🤍 «Фрилансер по жизни». Живи, а работай в свободное время! © #фрилансерпожизни #обучение #верстка
Дружище, я помог тебе? Подари мне кофе ➡☕ 🤍 Быстрый старт в БЭМ - 🤍 А зачем вообще все эти нотации — я ведь один верстальщик на проекте, помните? Помню. А ещё помню, как сам верстал до БЭМа: в каждом проекте придумывал что-нибудь такое новенькое. А потом открывал код годичной давности и удивлялся — какой идиот это написал? 🤍 - создание сайтов под ключ 🤍 - мой сайт и соц. сети
Что такое БЭМ методология от компании Яндекс? Основы БЭМ (BEM) для начинающих и как писать CSS код на БЭМ правильно и красиво. БЭМ - это методология в которой есть три основных понятия: Блок, Элемент, Модификатор. Верстка из PSD на Bootstrap 4 и BEM: 🤍 Документация: 🤍 ✔Советую посмотреть: Быстрый старт в HTML: 🤍 Быстрый старт в CSS: 🤍 Обзор плагина Emmet: 🤍 ⚡️ Эксклюзив на Boosty - 🤍 💡 Telegram канал - 🤍 🎥 Курсы на Stepik - 🤍 💰 Донаты на ЮMoney - 🤍 ВКонтакте - 🤍 Яндекс Дзен - 🤍 Rutube - 🤍 #bem #itdoctor #BEM #БЭМ #YandexBEM #ОсновыБЭМ
Привет! Методология БЭМ - без сомнения, крутая идея, которую создали парни из Яндекс. Это действительно большая и сложная модель представления компонентов в вебе, которая позволяет упростить работу с большими проектами. Однако, это наверное самая сложная тема для новичков в верстке. По крайней мере, с первого раза не вникает никто (не встречал таких). В этом видео постараюсь рассказать, что это, с чего его едят, и как верстать по БЭМ Меня зовут Максим Васянович. Фрилансер уже 5 лет, создал более 50 коммерческих сайтов. Преподаватель в онлайн-университете Skillbox, автор курса Веб-верстка. Понравилось? 🤍 Моя страница вконтакте: 🤍 Мой блог: 🤍 Мой сайт: 🤍 Канал в телеграм: 🤍 Чат для верстальщиков: 🤍 #обучение #формы #верстка
— Методология БЭМ — 🤍 — Архитектура CSS — 🤍 — CSS Modules — 🤍 Все шорты — 🤍
В этом видео мы поговорим о том, как правильно называть классы CSS по методологии БЭМ. БЭМ (Блок, элемент, модификатор) - методология разделения конструкции сайта на независимые компоненты. 1. Блок - основной компонент страницы, который может быть использован повторно 2. Элемент - составной компонент блока, который не может быть использован вне этого блока 3. Модификатор - компонент определяет состояние или поведение блока Буду рад любым пожертвованиям; Тинькофф - 5536 9137 6324 5442 Сбербанк - 5469 6200 1922 8210 QIWI - 4890 4947 4726 5197 Желаю приятного просмотра! Если у тебя возникли какие-либо вопросы - обязательно задавай их в комментариях под видео. Связаться со мной можно по следующим контактам: 🤍 🤍 🤍
Друзья, в видео расскажу о бэм нейминге, объясню принципы, которыми руководствовались ребята при создании данной методологии. Конечно же, теория это круто, но мы с вами пропишем бэм стили для целого лендоса, чтобы закрепить все на практике. Макет из урока: 🤍 Мой курс по верстке - 🤍 Урок по scss/sass: 🤍 Урок по Gulp: 🤍 Урок по Pug: 🤍 Подпишитесь на канал, если вам понравилось данное видео: 🤍
🔥 Интенсив «Первый заработок на создании сайтов» Участие бесплатное, но необходимо зарегистрироваться: 🤍 Реальная верстка сайта по методологии БЭМ. Разбор теории и наработка практики. Сервисы, которые помогут при вёрстке сайтов: Названия классов HTML/CSS — 🤍 Шпаргалка Flexbox CSS — 🤍 Сайт — 🤍 ВК — 🤍 Instagram — 🤍 Telegram — 🤍 и 🤍 Чат Telegram — 🤍 Курс "Супер Старт" - 🤍 Отзывы - 🤍 Базовый курс - 🤍 Продвинутый курс - 🤍 Отзывы - 🤍 Программа базового: 🤍 Программа продвинутого: 🤍 Отзывы - 🤍
В этом коротком видео рассмотрим что такое БЭМ, зачем он нужен и как правильно называть классы. В дальнейшем это поможет нам при верстке сайтов. –––––––––––––––––––––––––––––– 📌 Ссылки на источники Статья про БЭМ на моем сайте ➝ 🤍 Стартовый проект на GitHub ➝ 🤍 –––––––––––––––––––––––––––––– 🕒 Таймкоды из видео 0:00 Введение 0:33 Что такое БЭМ 3:17 БЭМ на практике
👉 В данном уроке поговорим о методологии БЭМ - по которой верстаются практически все сайты! Разберемся, почему стоит пользоваться именно данной методологией, и как с ее помощью писать код 👨💻 Материалы курса (верстка и макеты): Яндекс.Диск - 🤍 💥 Основной канал - 🤍 ✈️ Наш Телеграм - 🤍 🔥 Мой сайт AROKEN.RU - 🤍 📩 Мой Telegram - 🤍FIBERSON 📜 Мой ВК - 🤍 ⚠️ Осторожно! После прохождения курса ты рискуешь научиться создавать удобные сайты и ворваться в развивающийся айти рынок ❓ Остались вопросы? - Нет мотивации и уверенности в обучении? Пиши мне в соцсети, отвечу на твои вопросы и постараюсь помочь! 👨🏫 Преподаватель курса - выпускник Личного Менторства (ныне Премиум) (aroken.ru) и ныне участник команды: Никита Бёркхардт #aroken #Верстка #Айти #Обучение #Курсы
Познаем Бэм-нейминг Ссылка на BEM 🤍 Ссылка на соглашение по наименованию 🤍 Статья на хабре 🤍 Ссылка на материалы из видео 🤍 Полезные советы CSS: 🤍 Не ограничивай себя видеоуроками на YouTube! Узнавайте еще больше полезной информации! 👍👍👍Telegram-чат: 🤍 Telegram-канал: 🤍 VK: 🤍 - Не забываем, что самый лучший способ сказать "спасибо" - нажать кнопку "нравится" и скинуть ссылку на урок друзьям. Ничто другое так сильно не мотивирует автора продолжать работу :)
Из этого видео за авторством Виктора Карпова, разработчика веб-интерфейсов в Яндексе, ты узнаешь самые основы методологии верстки БЭМ (Блок-Элемент-Модификатор). Также, ты поймешь, почему методология в веб-разработке сегодня так важна и узнаешь, как происходило развитие БЭМа, созданного в стенах вышеупомянутого Яндекса. = СОДЕРЖАНИЕ 00:00:00 История создания БЭМ, как верстали раньше и в чем проблема верстки без методологии. 00:05:30 Появление блоков. 00:06:50 Блоки и элементы в них. 00:09:10 Префиксы. 00:10:44 Зачатки общепортального фреймворка. 00:12:15 Первая сборка. 00:13:07 Правила блоков. 00:14:50 Простые и составные блоки. 00:17:13 Правила полной независимости блоков. 00:20:39 Модификаторы. 00:22:40 Стабилизация нотации. 00:23:58 Общепортальный фреймворк: Лего 2.0. 00:26:38 Декларация страницы. 00:27:36 Сборка без рук. 00:33:29 БЭМ в наши дни. Что можно посмотреть и почитать? 00:35:23 О чем еще можно рассказать? 00:37:57 Материалы для этого доклада. 00:38:27 Как использовать шаблонный репозиторий project-stub? Как на его основе построить свой workflow? 00:40:17 Как использовать БЭМ-компоненты без стилей, то есть когда дизайн нужен собственный, не Яндекс? 00:42:27 Используют ли сейчас в Яндексе префиксы для именования классов? 00:43:27 Пишется ли BEMJSON руками? 00:45:10 БЭМ как замена Bootstrap: реально? Может БЭМ + Bootstrap? 00:47:21 Если есть вложенный блок, то как его правильно вкладывать в блок или элемент блока? 00:48:15 Будут ли примеры конкретных реализаций? 00:49:26 Правильно ли думать, что блок вкладывается в другой блок через элемент? 00:51:09 Так что же все-таки насчет реальных примеров? Пример с тестовой работой Виктора для поступления в ШРИ. 00:54:08 Можно ли сетку брать из Bootstrap, а остальное из БЭМ? 00:55:12 Верстальщика можно считать программистом? 00:57:31 Есть ли место на рынке для верстальщика в "чистом" виде, то есть для человека, который хорошо умеет только переводить из PSD в HTML? 01:00:05 Можно ли совместить BEMJSON и Angular.js? 01:01:18 Есть ли готовый сборщик на Gulp.js, поддерживающий рекомендуемую структуру файлов, с шаблонизатором вроде Jade? 01:02:32 ЗАКЛЮЧЕНИЕ = ССЫЛКИ И ДОПОЛНИТЕЛЬНЫЕ МАТЕРИАЛЫ Слайды для этого доклада: 🤍 Пример работы Виктора Карпова, когда он поступал в ШРИ: 🤍 Статья Варвары Степановой "Создаем свой проект на БЭМ": 🤍 = Контакты Виктора Карпова: 🤍 🤍 ⚛️⚛️⚛️ Пройди практический курс "Javascript Fullstack разработчик" от MakeWeb.me. Детали тут: 🤍 Телеграм для связи по курсу: 🤍makewebchatme 🛍 🛍 🛍 Поддержи проект и получи скидку 5% на 1-ю оплату хостинга/домена Reg.ru. Промо-код: 948E-53B9-CF98-8204 (вводится во время оплаты услуги). 💬 💬 💬 Присоединяйся к нашему Telegram-чату 🤍
Поговорим о методологии БЭМ в общих чертах. Поддержать канал: Это поможет выпускать видео на регулярной основе. Помощь, сопоставимая с чашкой кофе, поможет сделать канал лучше. 1. Яндекс Кошелек 🤍 2. Patreon: 🤍
Подробнее о курсе «Верстка-Мастер. От теории до верстки популярных шаблонов»: 🤍 В этом видео уроке мы поговорим с вами о методологии БЭМ, которая на данный момент является самой популярной и в ее основе лежит договоренность о том, как разбивать интерфейсы на независимые блоки, описывать их, и в дальнейшем повторно использовать. По результатам урока вы узнаете о том, что такое БЭМ, что лежит в основе данной методологии, разберем что же собой представляет блок, какие нюансы имеются при создании блоков, обсудим элементы и их особенности, также поговорим для чего нужны модификаторы и как нужно применять миксы. После теоретической части будет рассмотрен живой пример макета, который сверстан при помощи БЭМ методологии.
Методология БЭМ создана в Яндексе для разработки сайтов, которые надо делать быстро, а поддерживать долгие годы. Она позволяет создавать расширяемые и повторно используемые компоненты интерфейса. БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste». Поддержать развитие канала: 🤍 VK: 🤍 Почта для связи: codeBurger770🤍Gmail.com #codeburger
dozen.web в instagram telegram - 🤍 00:00 - введение. 00:13 - что такое БЭМ и для чего это нужно? 01:17 - блок. 06:17 - элемент. 09:05 - модификатор. 13:10 - для чего нужна эта методология. #верстка, #html, #css, #методология, #бэм
В данном уроке Вы узнаете о методологии БЭМ, благодаря которой мы научимся правильно, а самое главное логично называть классы элементов. В конце урока мы с Вами на реальном макете закрепим знания полученные в этом уроке, сверстав несколько экранов. Ссылка на макет - 🤍 * Telegram - канал, для общения и помощи в обучении между учениками, которые проходят данный онлайн курс, а также для информирования о новых видео уроках, которые будут выходить в ближайшее время - 🤍 *
Сервис проверки методологии БЭМ: 🤍
На примере мини-проекта разберем, как разбить страницу на блоки. Расскажем, для чего нужны уровни переопределения, какие есть инструменты для ускорения разработки и как правильный подход к работе помогает в дальнейшем развитии проекта.
Начни карьеру с бесплатного курса "Основы программирования" 🤍 Разработка веб-интерфейсов по БЭМ методологии. На практических примерах покажу, как применение БЭМ позволяет упростить и ускорить разработку интерфейсов, повторно использовать готовые компоненты и получить по-настоящему надежный и дешевый в поддержке процесс. Поделюсь опытом, накопленным за годы разработки общих компонентов в Яндексе; Расскажу про «подводные грабли»; Дам полезные рецепты; Познакомлю с инструментарием БЭМ-платформы. Подписывайся на наш канал и смотри новые видео первым: 🤍 Проходи бесплатные курсы: 🤍 Выбери профессию: 🤍 Смотри вебинары: 🤍 Читай статьи: 🤍 Проверяй знания: 🤍 ВКонтакте 🤍 Facebook 🤍 Одноклассники 🤍 Telegram 🤍 Instagram 🤍 #разработкавебинтерфейсов #бэмметодология #вебпрограммирование #разработкасайтов #geekbrains #программирование #курсыпрограммирования
В этом обзоре я рассказал немного теории про использование BEM и SMACSS, о том, что общего в этих методологиях и для каких типов проектов они подходят. Подробности по ссылке: 🤍 Также я рассмотрел варианты организации файловой системы (дерева проекта) при работе с каждой из этих методологий, остановившись на некоторых особенностях. И на практике показал начальный этап рефакторинга уже существующего проекта. Весь рефакторинг необходимо проводить поэтапно, для того, чтобы это не "погубило" проект. Документация по BEM: 🤍 Документация по SMACSS: 🤍 Книга SMACSS у нас в паблике (для ознакомления): 🤍 Шаблон Sport Here: 🤍 Финальный вариант с директориями из видео: 🤍 Мы на твиттере: • Александр Гончаров: 🤍 • Никита Тарасов: 🤍 uWebDesign это: • Сайт: 🤍 • Подкаст в iTunes: 🤍 • Паблик на ВК: 🤍 • Лента в Instagram: 🤍 • Лента в Twitter: 🤍 • Канал на YouTube: 🤍
Практически у всех кто сейчас начинает верстать сайты в голове одни и те же утверждения - "юзай флексбокс / бутстрап отстой / jQuery отстой / не подошел флесбокс - юзай гриды / флоуты отстой" и много чего другого, включая "Юзай бэм / почитай про бэм!". BEM - 🤍 OOCSS - 🤍 SMACSS - 🤍 ITCSS - не нашел отдельного сайта, но легко гуглится ACSS - 🤍 И многие даже не задаются вопросом - ПОЧЕМУ? Почему это плохо или хорошо?!... И, не успев даже понять какие есть вообще свойства, лезут в BEM. И тут мозг вообще плыть начинает. И так непонятно где юзать абсолют, а где фиксед, так ещё и каким-то образом нужно понять, что из всего этого относится к элементам, а что к модификаторам... Отсюда мой вам совет - если вы только-только начинаете вникать во всё это - начните верстать ХОТЬ КАК-ТО! Реально толпы людей в чатах на протяжении часа ведут дискуссии "Как правильно назвать блок? А это по BEM или не по BEM". За это время можно полноценный просто лендинг сверстать! Есть отличная поговорка: «Done is better than perfect». Сделанное лучше идеального. Вот вы научились верстать простые сайты (визитки, лендинги) и сталкиваетесь с большим проектом. Раньше, вы могли писать на своих небольших проектах все стили в одном файле, а тут можете столкнуться, что у css файла есть ограничение на кол-во селекторов (4095). Дальше вы понимаете, что стили нужно разбивать на файлы. И тут всплывает уже море вопросов - "а стили располагать рядом с компонентом или делать аналогичную структура ксс файлов, как и компонентов? А что делать со стилями, которые пересекаются но используются в разных компонентах? А где располагать общие стили, например для body?" И вот в этот момент я вам советую почитать не только про методология БЭМ, но и про такие подходы, как ITCSS / OOCSS / SMACSS / ACSS. Да-да в мире существуют и другие методологии/подходы. Вам вовсе не требуется знать ОТ и ДО все их и всё в них, но из каждого можно взять для себя что-то полезное. Так, например, из БЭМа можно взять концепцию наименования классов, из ITCSS структуру css файлов. И ознакомившись с различными подходами, вы будете понимать где, какой применять, включая БЭМ. И тогда он уже будет вам служить во благо, а не быть ЗЛОМ. = Telegram Канал - 🤍 Чат - 🤍 = Подписывайтесь в соц. сетях: Facebook - 🤍 VKontakte - 🤍 LinkedIn - 🤍 Twitter - 🤍 Instagram - 🤍 = Мой второй канал: 🤍 = Привет, меня зовут Виталий Киренков, и я занимаюсь веб-разработкой с 2007 года. За это время я сверстал более 200 сайтов (как минимум, половина из них с JavaScript), разработал с коллегами 2 интернет-банка на React + Redux + Typescript. И на этом канале я делюсь своим опытом в части вёрстки, javascript, и делаю всякие полезные видео для новичков и не только. Больше информации обо мне: 🤍
Привет, темой сегодняшнего урока будет то как работать со стилем именования классов в БЭМ и совмещать его с SASS / SCSS, а также поговорим о том как амперсанд помогает сокращать вложенность. Приятного просмотра, не забудь поставить лайк, подписаться и оставить комментарий. Дополнительные материалы: Что такое БЭМ - 🤍 Амперсанд в SASS / SCSS - 🤍 Мои соц. сети: Telegram - 🤍 LinkedIn - 🤍 Twitter - 🤍 Facebook - 🤍 Instagram - 🤍 #SASS #SCSS #CSS #web #ityoutubersru #VladimirShaitan
💻 Подписывайтесь на мой Telegram-канал с еженедельными разборами алгоритмических задач для собеседований — 🤍
На трансляции разберем методологию БЭМ на примере блока Ссылка на материал из трансляции: 🤍
Начинающие разработчики очень часто неправильно используют методологию БЭМ. Разработчик создает один блок в котором все остальные html элементы являются элементами блока или же создают элементы от элементов. Часто не правильно используются модификаторы, используются элементы не относящиеся к данному блоку. Давайте разберемся.. Получи все уроки по ссылке 🤍
CSS Методология BEM / БЭМ Верстка макета Плейлист: Курс по HTML / CSS 🤍
Школы разработки интерфейсов в Москве 2013
Разбираем применение БЭМа на примере нескольких блоков
Начни карьеру с бесплатного курса "Основы программирования" 🤍 Файловая система и сборка БЭМ верстки. Методология БЭМ удобна для прототипирования. Каждый блок сохраняется в отдельный файл. Но затем блоки нужно собрать. На мастер-классе мы покажем, как это делать правильно. Мы разберем: - необходимость разделения проекта, - несколько подходов в организации файловой структуры, - сборка проекта, - применение SASS. Подписывайся на наш канал и смотри новые видео первым: 🤍 Проходи бесплатные курсы: 🤍 Выбери профессию: 🤍 Смотри вебинары: 🤍 Читай статьи: 🤍 Проверяй знания: 🤍 ВКонтакте 🤍 Facebook 🤍 Одноклассники 🤍 Telegram 🤍 Instagram 🤍 #файловаясистема #бэмверстка #sass #geekbrains #программирование #курсыпрограммирования
Что отличает сильного верстальщика от обычного? Знание новых технологий, опыт работы, сильные мышцы? Нет, главное отличие — это способность воспользоваться правильной CSS-методологией. Давайте разберёмся, что такое CSS-методология, поделим аудиторию на два лагеря, рассмотрим несколько самых популярных методологий, разделим их на три главных типа и научимся правильно скрещивать. Доклад Алексея Охрименко на moscowcss №1 в Яндексе 2 марта 2017. Слайды: 🤍 Встреча: 🤍
Егор нашел в интернете презентацию и решил поделиться важными знаниями по ней с коллегами по работе. Если вы исыптываете дискомфорт в верстке или именовании классов. И у вас еще не styled component головного мозга - будет полезно и интересно
Усовершенствованная модель биоэнергетического массажера (БЭМ) Fohow воплотила в себе лучшие характеристики предшествующих моделей: лёгкий, компактный + новая ультразвуковая насадка для точечной проработки проблемных зон лица и тела! 1️⃣ выведение токсинов, очищение крови 2️⃣ улучшение качества сна 3️⃣ ускорение метаболизма 4️⃣ укрепление иммунитета, увеличение клеточной активности 5️⃣ уменьшение отёков, устранение болей, укрепление костей и мышц 6️⃣ регуляция вегетативной нервной системы 7️⃣ коррекция фигуры 8️⃣ очищение меридианов, устранение застоев крови 9️⃣ косметический эффект 🔟 улучшение кровообращения Эффект иглоукалывания и массажа Гуаша, управление током при помощи обеих рук! Полный контроль глубины воздействия, отсутствие риска как для пациента, так и для мастера, проводящего процедуру. Это удивительная технология лечения при помощи биологического тока. Одна процедура РАВНОЗНАЧНА: 🔺 10 сеансам массажа 👐! 🔺 45 минутам детоксикации лимфы 🔺 1 часу очищения энергетических каналов всего тела 🔺 Бегу на 6 км по потере жировой ткани 😳 🔺 500 повторениям жима от груди лежа 🔺 Поглощению анионов на протяжении 3 часов (как нахождение 3 часов в лесу на свежем воздухе) Биоэнергомассажер (БЭМ) Fohow сочетает в себе эффект таких физиотерапевтических методик как: 🔸 иглоукалывание 🔸 массаж Гуаша и Туйна 🔸 прижигание 🔸 вакуумная терапия ИМЕЮТСЯ ПРОТИВОПОКАЗАНИЯ! 🌏 🤍 #fohow #бэм #биоэнергомассажер #фохоу #продукцияfohow #массаж #массажер #похудение #стройнаяфигура
Всем привет друзья! В данном ролике мы изучим с Вами правильную вёрстку по методологии БЭМ, разберем компонентный подход к разработке интерфейсов на практике, после который вы полностью поймете всю мощь использования данного подхода и удобство использования в своей вёрстке. Описание: 00:00 Кратко о БЭМ 00:48 БЭМ на примере домика 02:01 Рассматриваем макет 04:01 VS Code и плагин Ecsstractor 05:01 Начало вёрстки. Верстаем страницу компонентов 08:44 Верстаем блок 'кнопка (btn)' 13:45 Верстаем блок 'карточка (card)' 27:40 Верстаем страницу 'Тарифы (rate)' 34:46 Разбираем модификаторы 37:10 Результат вёрстки по БЭМу #бэм #верстка #web