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

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

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

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

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

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

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

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

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

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

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

Спасибо )

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

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

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

@rah_emil

2 жыл бұрын

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

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

Спасибо

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

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

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

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

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

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

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

@AVISTV

8 ай бұрын

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

@jenerly-liasinjuaru2643

8 ай бұрын

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

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

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

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

@rah_emil

2 жыл бұрын

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

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

@Metotron0

Жыл бұрын

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

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…

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

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

@kiralatysheva6794

Жыл бұрын

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

@ANTON_BERG_MINSK

Жыл бұрын

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

@Metotron0

Жыл бұрын

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

comment

Вот тут 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 - ты ведь уже обозначил, что линк это часть блока "меню" правильно? Зачем делать его дочерним элементом элемента?😀 Он и так часть блока меню. Лишняя вложенность или я чего-то не понимаю....?

да явно ты не оратор