БЭМ (BEM) Для Начинающих Часть 1
HTML-код
- Опубликовано: 19 сен 2024
- В этом видео мною допущена ошибка, где я говорю, что у элемента может быть другой элемент. Это неправильно. Спасибо за понимание.
Основы БЭМ (BEM) для начинающих.
CodePen codepen.io/ros/...
Доки БЭМ ru.bem.info/
Доки MCSS operatino.gith...
Доки SMACSS smacss.com/
Пишите комментарии, задавайте вопросы, ставьте лайк, подписывайтесь!
Наконец-то хоть кто-то нормально объясняет эту тему, пересмотрел кучу видео и нашел то, что надо
Отличная подача материала, приятно слушать и запоминать. Продолжайте в том же духе! Спасибо за урок!
Dispel TR Спасибо!
Видео очень понравилось! Особенно то, что автор говорит повседневным языком и нормально объясняет, а не как большинство сей час - как с учебника читают.
Благодарю за видео, автор ты прекрасен!
+Enoughz Enoughz Спасибо за отзыв!
из всех 3 видео, которые я просмотрел ты Бест!!!
Пересмотрела до этого 3 видео. Ничего не поняла. Только вы смогли донести до меня инфо. Спасибо большое. Вы суперрр!!!!
Однозначно лайк!Спасибо,что рассказываешь и про свой подход.Для начинающего это очень познавательно.
+Arthur Kitskan пожалуйста#
Чувак - ты молодец и урок хороший! Но ты не так спиши при общении... Говори лучше спокойно без запинок. Если что люди поставят скорость на x2 - если ты обеспокоен этим.... А контент ТОП!
интересненько! лайк
А так все круто!) И БЭМ крутая штука)
Спасибо за урок, очень круто! Но в плане наследования стилей кнопок, я бы сделал общий класс .btn и делал бы extend от него, как в языке программирования)
Спасибо за видео. Есть ошибки, но в целом почерпнул для себя что-то новое.
Элемент в элементе? В описании я это указал.
Да я сначала написал, а потом прочитал описание) Ну там вроде ещё что-то было по мелочи. Щас не вспомню, а заново пересматривать времени нет. В целом всё гуд :)
Да я и сам ещё далеко не всё знаю.
Полезный видос, хорошая подача
Спасибо
У вас ошибка на 8:20. Элемент внутри назывался бы не .nav__item__col а просто .nav__col.
Очень надеюсь, что Вы сделаете видео об использовании БЭМ, инструментария БЭМ на практике. Рассмотрите технологии БЭМ, которые формируют общий знаменатель для любого веб-проекта, будь-то лендинг или масшабная торговая площадка.
+Chillout Me Это проблематично. Нужно много практики на этих инструментах, чтобы понять весь бэм стэк. Я пока использую более "народные" средства. Возможно в будущем буду для себя брать что-то из стэка и тогда можно будет сделать обзор.
Понял Вас. Так или иначе, отличный обзор для того, чтобы понять, есть ли смысл углубляться в изучение БЭМ и благоприятная отправная точка для этого.
Благодарю.
На сайте БЭМа пример разметки такой, тоесть элемент привязывается к блоку, а элемент к элементу нет.
Не нужно писать menu__layout__layout-unit__item
Когда внутри блока элемент можно обозначить просто
menu__item
независимо от того вложен он еще в какие-либо элементы или нет
Index
Products
Contact
Alexander Nesterov Да, таким образом можно не плодить длинные классы.
При рассуждении о .btn вы сказали что "тупо создавать одинаковые стили для разных элементов, поэтому можно создать один общий, к примеру .btn", а потом вы сказали что лучше использовать что дают, к примеру возможности екстенд SASS. Но он в итоге конвертится в тоже дублирование свойств. Вы на выходе получаете то что назвали тупость. Повторение одних и тех же свойств с одними и теми же значениями отдельно на разных элементах.
+Ilia Lataria Я подразумевал, что не нужно копипастить одинаковые стили в разные элементы, для этого можно сделать глобальный класс или воспользоваться @extend.
Ошибка. Использовать элемент в элементе с зависимым названием одного элемента от другого не допускается по данной методологии
Автор вообще не вкурил бэм ваапще. Еще и обучающее видео записал.
Кнопка - это блок, а текст в кнопке - это элемент
Эх, сейчас бы написать, что нельзя вкладывать элемент в элемент и почувствовать себя илитой! Но, пожалуй, воздержусь.
см описание к видео
это был сарказм))) Автор, спасибо за видео.
Погодите, сударь, дак можно вкладывать элемент в элемент, просто он будет являться частью блока(в названии). Надеюсь, вы это имели ввиду))
Отличное видео, но есть такой момент, на сколько я понял, по БЭМ методологии элемент элемента это новый блок, если нет, то поправьте меня.
Рустам Башаров Спасибо за отзыв. Нет, элемент элемента это не новый блок.
Рустам Башаров ru.bem.info/method/faq/#В-каком-случае-создавать-блок-в-каком-элемент
+Ros Ivanov Элемент элемента - это вообще не по БЭМу! В документации четко и понятно об этом пишут. Нет ничего хуже разбирать псевдо-БЭМ, когда горе-девелоперы лепят что попало, и это только с толку сбивает. В любом случае спасибо за старания.
+Andrew Reva Это моя ошибка которую уже обсудили в коментах. В любом случае хорошо, что обратили внимание.
+Ros Ivanov Прошу прощения, не заметил. Спасибо
а на основании чего он вкладывает один елемент в другой, методология БЭМ это запрещает
Посмотрите описание к видео.
вопрос: например я для кнопки решил использовать класс btn, в каком нибудь блоке эта кнопка отличается от класса btn, какой следует добавить дополнительный класс данной кнопке block-name__btn или btn_modif?
Я бы поставил .btn.btn_modif
Для господина nu3DN
Для начала было бы неплохо если вы включите возможность отвечать на ваши комментарии (настройки google+).
Если я скажу, что элемент col принадлежит элементу item, тогда почему .nav__item__col ошибка ?
Запись .nav__col более лаконична, уменьшает логический каскад и в целом это правильный подход, но это не всегда так.
Ros Ivanov Это не рекомендовано по методологии bem ru.bem.info/faq/#Почему-в-БЭМ-не-рекомендуется-создавать-элементы-элементов-block__elem1__elem2
Игорь Попов Окей. Кстати ссылка уже была ниже в коментах.
+Ros Ivanov а если вам нужно будет элемент .nav__item__col вынести из .nav__item? Тогда такое название класса абсолютно теряет смысл. Элемент может быть лишь у блока, но никак не у элемента. BEM в своем подходе к наименованию DOM элементов не ставит задачу повторить DOM дерево. BEM дерево и DOM дерево существуют независимо друг от друга. Та что nu3DN прав, это ошибка. Даже более того, такое наименование класса - это уже не BEM.
Alex Bel Да, ошибка.
Спасибо, очень полезно и понятно. Вопрос касательно BEM + Bootstrap(bootstrap grid). Как правильней делать каркас?? Примешивать bootstrap классы к BEM-блокам или создавать отдельно bootstrap-блоки и в них помещать BEM-блоки??
Maxim MadMax Привет, я лично не смешиваю бутстрап сетку с блоками.
Например
.container
.row
.col-md-6
.my-block1
.col-md-6
.my-block2
Cтараюсь держать по-отдельности свои классы и классы фреймворков, чтоб потом не путаться.
Либо бэм либо бутстрап.
Конечно спасибо за ликбез, но совершенствуйте свою подачу пожалуйста. Очень трудно не уснуть.
после того, как нас пол часа отучали от каскадов, потом снова прийти к их использованию для "железобетонности", - само решение БЭМ уже становится сомнительным.
+Алексей Алексеев Так бэм не навязывает каскадность, а набооборт не рекомендует ее.
Ros Ivanov , что не мешает автору рекомендовать каскадность.
+Алексей Алексеев каскад от модификатора блока к элементам этого блока допускается. Это не вызывает проблем. Допустим, у вас список из 20 элементов, и нужно каждому поменять какое-то свойство. Есть два варианта: 1) каскад от модификатора, 2) добавление модификатора каждому элементу. Что проще: добавить один модификатор или 20?
Alex Bel , согласно методологии БЭМ должен быть общий класс для элементов и класс модификатора, типа class="item item--mod". Для решения этой задачи есть бэм препроцессоры, которые отлично вносят нужную разметку на страницу. Например связка jade+ bemto+stylus очень хорошо себя ведет.
БЭМ создавали не для того, чтобы вам было меньше писать, а чтобы легче поддерживать и править.
Если хотите каскадность, пользуйте ее, но зачем вам тогда БЭМ?
+Алексей Алексеев см. ru.bem.info/faq/#Почему-нежелательно-использовать-вложенные-селекторы
"Методология БЭМ допускает использование таких селекторов, но рекомендует по-максимуму его сократить. Например, вложенность уместна, чтобы менять элементы в зависимости от состояния блока или заданной ему темы".
ruclips.net/video/5Gp_2kN5Bv4/видео.html в этом моменте с екстендом кнопки. Это конкретный пример, используемый в боевых условиях или просто показан принцип? Просто если .searchbox__btn изменится, то это же повлияет и на .login__btn. Я не очень матерый в сасс, может вопрос и глупый.
+Алексей Юдин в таком случае рекомендуют использовать т. н. абстрактные блоки. Одинаковые свойства выносятся в @extend, который по сути и является абстрактным блоком, и далее подключается к требуемым селекторм (в данном случае классам элементов).
Очевидный минус эксетдов это конкретно раздутый css, он ведь вставляет css в каждый класс, хз что в этом крутого, когда лучше перечислять классы и то там есть свои ограничения.
+Павел Левин вставляет свойства в каждый элемент как раз @mixin, а @extend группирует элементы, добавляя к ним свойства единожды и вынося их отдельно от остальных элементов.
Каскад это зло. БЭМ нужен, чтоб минимизировать его использование. А юзать и бэм и каскад вместе это как сидя в моторной лодке продолжать грести веслом.
Здравствуйте у вас уже не будут выходить видео?
Хотелось бы послушать про единицы измерения (em, px) в вашем исполнении
+Влад Спиваков Возможно будут видео, а что именно интересует в px, em ?
Вот у вас отступы все заданы в em(почему лучше чем px, как рассчитывать, где ещё нужно применять, а где лучше px)...читал разные статьи, но не сильно "въехал" в это дело. Также было и с БЭМ, но после вашего видео сразу начал использовать)
+Влад Спиваков есть другое предложение: добавляйся в скайп, поговорим о твоих вопросах, заодно запишу видео по теме.
Что за глупое наследование!!!!
ruclips.net/video/5Gp_2kN5Bv4/видео.html
Мы меняем .searchbox__btn, и у нас меняется .login__btn
Если хочется наследование, то нужно создать глобальный класс и от него наследоваться, в .searchbox_btn и login_btn.Каждая кнопка в свою очередь, будет дополнять свои стили.
Где-то я все читал это.
27:00 каскад же в sass невозможен?
почему?
Это скорее вопрос)
Все можно.
звук жуть
укурок какой-то
иди на завод работай, что ты тут забыл?