БЭМ методология - что это? БЭМ востребован? Почему надо верстать по БЭМ'у?

Подписаться 10 тыс.

Просмотров 22 тыс.

50% 1

Дружище, я помог тебе? Подари мне кофе ➡☕ yoomoney.ru/to/4100118065342340
Быстрый старт в БЭМ - ru.bem.info/methodology/quick...
А зачем вообще все эти нотации - я ведь один верстальщик на проекте, помните? Помню. А ещё помню, как сам верстал до БЭМа: в каждом проекте придумывал что-нибудь такое новенькое. А потом открывал код годичной давности и удивлялся - какой идиот это написал?
========================================
avis-agency.ru - создание сайтов под ключ
rah-emil.ru - мой сайт и соц. сети

Опубликовано:

12 апр 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 53

@jikajibeka791 2 года назад

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

@vipeerx 3 года назад

Шикарный сайт. Не знал, что такое БЭМ. Теперь, более менее понял, надо поработать с этим. Очень помог!)

@itthemeview7076 3 года назад

Хорошая методология сам переучивался на нее долго, но она одназначно того стоило, со временем проще становится. Хорошее видео, по простому по понятному👍

@eridanbraus4853 7 месяцев назад

9:55 за это отдельно лайк, орнул в голосину с этого, по доброму

@voorooniin Год назад

Друже, спасибо тебе! Все по полочкам разложил, все пробелы заполнил. И тем более, расширил возможности. Я знал что можно так сделать, с импортом, но думал там куда более сложнее все делать. В общем ты лучший! По простому объяснил сложное. Талант, не иначе)

@nalyticsmax7804 7 месяцев назад

Отличное объяснение! Нам препод на второй же лекции веб сайтов сказал пишете так, почему не сказал, какая строгая методология не сказал, только благодаря вам всё понял, СПАСИБО!

@yevheniipolovinchuk5326 Год назад

9:53 - в голос проорал

@user-sp1tz6gn1z 11 месяцев назад

Спасибо за видео))

@denisfloresco6352 Год назад

Какая же жиза с подключениями стиля, я обычно все делаю на реакте и если перехожу на чистый html с css то иногда забываю про это xD

@sOnich. Год назад

Наконец-то понял что такое Бэм 😀🤘 Спасибо за видео.

@_Snacker_ Месяц назад

В типе модификатора "ключ-значение" используется следующий синтаксис: key_value (пример: theme_dark, но не them-dark)

@const1525 2 года назад

Друг, спасибо!

@anonymous_ua 2 года назад

Спасибо )

@DmitryYa89 Год назад

лайк за описание кнопок

@user-gd5bw7ut3o Год назад

Названия блоков через тире - ".название-блока", названия элементов через2 нижних подчеркивания - "название-блока__имяэлемента", название модификатора через нижнее подчеркивание- "название-блока__имяэлемента_модификатор".

@serzhanzhumagazhaev7297 2 года назад

Спасибо

@alexburu9065 2 года назад

За название уже лайк

@rah_emil 2 года назад

Ну наконец-то!!! Я уж думал никто не подметит😝

@user-ku9bv7pd7d 4 месяца назад

"дочерний" элемент... и всегда ли для модификаторов применяется одинарное нижнее подчеркивание? Я встречала "--" - двойной дефис

@LLuKKen 6 месяцев назад

Есть офигенная идея: а давайте создавать для каждого параграфа страницы отдельный файл со стилем) Удобно! не нужно искать строчку в коде..снёс нафиг файл со стилем и всё! Можно и html - файл так же отдельный для каждой строчки зафигарить..и в отдельную папочку положить)

@user-by9lm2zj1t 4 месяца назад

По методологии BEM запрещается использовать иерархию вложенных элементов, в их названии. У каждого вложенного элемента class = “name__elem” где name это имя родительского блока, а elem - имя вложенного элемента и никаких name__elem-elem1. Это важно! потому что когда потребуется переиспользовать блок, и поменять местами вложенность элементов начнется хаос, тк все их названия завязаны не только на родительском блоке но и друг на друге.

@Metotron0 Год назад

Какие есть доводы для тех, кто просто в scss удаляет импорт файла, в котором описано всё то же самое, только не километровыми именами стилей, а вложенно в .blockName {}? Кстати, эту фишку завезли в хром, CSS nesting называется.

@Edgar-pu1lc Год назад

2:30 так на много удобнее,чем твой вариант

@gubatenkov Месяц назад

Ты хоть бы спеку БЭМ глянул. Там есть этот пример, и то что ты говоришь запрещено, там как раз описано как допустимый сценарий: `Но применим к нему правила именования БЭМ: класс nav будет обозначать имя блока, nav__item и nav__link - имена элементов, а nav__item_active - имя модификатора элемента item. В таком случае запись будет следующей: One Two Three `

@jenerly-liasinjuaru2643 6 месяцев назад

Документация по методологии: "Элемент - всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию" Автор видео: "menu__item-link-text" (5:41) Я, в попытках разобраться: 🥲

@AVISTV 6 месяцев назад

Так я же не пишу menu__item__link🙃

@jenerly-liasinjuaru2643 6 месяцев назад

А, то есть как ИМЯ элемента? Ладно, тоже способ :)

@Roltun 4 месяца назад

Читал зарубежного автора, что надо использовать классы по минимуму. Например если есть название блока .some_class, то вложенные элементы надо стилизовать .some_class p, .some_class img. Но мода меняется. БЭМ очень бюрократичная система. Пусть её пользуются только внутри Яндекса. Нам это не нужно, тем более на простых сайтах

@arthurion 2 года назад

Разве БЭМ можно в полной мере использовать с чистым HTML? Там же для каждого блока своя папочка, а с HTML так не выйдет. Все блоки в кучу. Надо юзать какой-нибудь шаблонизатор типа Pug.

@rah_emil 2 года назад

Конечно удобнее будет БЭМ+Pug, но и без pug можно обойтись легко

@stenmacintosh1417 Год назад

Дружище..... вот ты код ...напряг так напряг... я хотел бы посмотреть когда у тебя будет 5 вложений и 17 элементов... на последнем у тебя будет .. трасса Москва - Владивосток... отправляется с 1 789 пути...

@Metotron0 Год назад

Я сейчас хожу по разным видео как раз, чтобы узнать, как это должно выглядеть, но почему-то все ограничиваются всякими .menu__link. То ли люди не занимаются реальной работой, то ли они разбивают всё на настолько мелкие компоненты, что у них каждый блок верстается по 4 часа, потому что нужно под каждый из них создать файл и написать кучу текста. Мне работодатель не разрешит столько времени закладывать на вёрстку.

@alextopsite Год назад

Хороший урок, дает понимание, что такое БЭМ

@user-od1ui3rb6j 2 года назад

ul.menu li.menu__item a.menu__item-link (почему предпочтительней так?) a.menu__link(а так нет)

@user-od1ui3rb6j 2 года назад

@@AVISTV если дальше ьудет идти вложенность то делаем так? a.menu__item-link p.menu__item-link-text Img.menu__item-link-text-img

@yuriy1196 Год назад

@@AVISTV Элемент - всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2.

@spirit-tl7cp Год назад

@@AVISTV так а в примере с menu он, получается, наследуется от menu и, значит, можно писать menu__link, а не menu__item-link ?

@Metotron0 Год назад

@@user-od1ui3rb6j header__mobile-menu__nav__item__link-text-description-img_with-border…

@erhanblock1965 2 года назад

Ничего не понял(

@AlekMuz 2 года назад

comment

@Animalfox Год назад

Что я понял, так это то - что БЭМ устарел. БЭМ решает проблему именований и проблему компонентов? Легко можно использовать вместо этого Бонусом ещё и атрибут lang="scss" или любой другой препроцессор в style можно положить. Проблема файлов? Во vue.js 1 компонент 1 папка, проблемы нет. К чему весь этот бэм непонятно...

@kiralatysheva6794 Год назад

какую методологию учить сегодня?

@ANTON_BERG_MINSK Год назад

Синтаксический сахар, это все делают обычные фреймворки реакт например, нах это БЭМ так и не понял

@Metotron0 Год назад

@@AVISTV приятно как правило то, что привычно. А привычки можно менять. Единственное исключение - отступы в два пробела. За такое нужно заставлять работать на 14" ЭЛТ-мониторе в FullHD разрешении.

@mico6762 3 года назад

Вот тут ru.bem.info/methodology/quick-start/ написано, что так, как на 2:30, можно делать

@user-bu4jj3uz2s Год назад

@@AVISTV а если у дочернего элемента menu__item-link будет ещё дочерний элемент, а у того ещё, название будет menu__item-link-'новое название'-'еще новое название'??

@spirit-tl7cp Год назад

@@AVISTV так вот именно - блока ( блока menu__...) А не элемент, часть элемента - (menu__item-link). Когда ты написал menu__link - ты ведь уже обозначил, что линк это часть блока "меню" правильно? Зачем делать его дочерним элементом элемента?😀 Он и так часть блока меню. Лишняя вложенность или я чего-то не понимаю....?