Спасибо за качественное видео, но позволю себе комментарий: - с т.з. семантики вместо подходящих по смыслу тегов используется div. - там где говорили что мелкие элементы типа text можно отдельно не называть по БЭМ, не соглашусь, в случае адаптивной верстки блок карточки товара может выглядеть совсем иначе.
Хорошее видео! Если ничего не путаю, то модификатор через 2 "--" применялся изначально, потом они перешли на "_" . В комбинации с препроцессором выглядело бы еще эффектнее.
Подскажите пожалуйста, для соцсетей достаточно ли было в CSS написать ".social__link--twitter", вместо ".social__link.social__link--twitter"? Также по методологии Комбинированные селекторы не рекомендуются в связи с тем, что у них получается более высокая специфичность.
Множественные селекторы не рекомендуют использовать по причинам связанным с производительностью рендера страниц - особенностью работы с этим современных браузеров. Это нужно либо запомнить для себя как догмат в случае если нет желания точно вникнуть в проблематику. И ни в коем случае не советовать людям делать иначе, не понимая почему этот догмат появился. Или разобраться в том, как и почему существует такая рекомендация - Проще всего понять самому, это взять страницу с вложенностью больше 32 и чаилдами больше 32, плюс файл стилей на несколько тысяч селекторов. И попытаться описать что то через множественные селекторы для корневых элементов. И посмотреть потребляемые ресурсы. Тогда догмат о опасности множественных селекторов станет очевидным, даже на i7 с 64гб оперативной памяти. Потому что разбор селекторов браузером идет справа налево. Указывая множественный селектор вы создаете ситуацию при которой вероятность когда браузер будет вынужден перебирать ВСЕ ДОМ ДЕРЕВО от его крайнего элемента к корню крайне велика БЭМ сам по себе, так же появился не только из за необходимости решения задачи инкапсуляции свойств обьекта с целью обеспечения его переносимости. Но и как эффективное средство минимизировать накладные расходы работы браузеров, при рендере html документа.
Добрый день. все понравилось. Есть пару вопросов: 1)Почему назвали title__small, блока title у нас ведь нету? 2)Почему класс social__link, если блок имеет класс socials а не social?
Добрый день. 1. Просто разбивка всех заголовков на свой класс. Возможно правилььнее было бы через модификаторы 2. Потому что общий блок это socials а отдельная иконка это social
Почему btn--text-uppercase если uppercase может понадобиться не только на кнопке. Не правильнее ли будет назвать просто uppercase, что бы можно было применять и в простом тексте как дополнительный стиль
Действительно, самое адекватное видео. А то все остальные идиотизм оторванный от реале или пустозвонство. А как делать нейминг и вложенность для сложных составных блоков? Например, joxi.ru/12Mloqtlo9a8mJ есть карточки, но в них раскидан как контент, так и оформиловка. А вот про * есть нюанс, удобно прописывать так отступы, только надо указывать > * иначе вложенные теги тоже поедут, а нужно лишь блокам или элементам задать отступ.
Есть вопрос, не совсем понятно зачем в БЭМ нужны модификаторы. Разве для качественного наследования недостаточно будет миксов блоков и элементов? Как пример классы кнопки: button form__button, где в 1 класс пойдет общая структура кнопки, во второй все остальное, включая цвет и отступы. Нужно понимать что кнопки срецифичны в дизайне и с большой вероятностью не будут отличаться многим от шаблонного класса button, а для небольшой коррекции можно будет стили дописать в классе элемента. Поэтому непонятно, зачем нужны модификаторы, где в отдельных случаях прописывается цвет:красный и про него забываешь на весь оставшийся проект
Добрый день. Представьте что у вас есть 3 кнопки. Одинаковые по цвету, тексту и т.д. Но при этом отличаются только по высоте и они не привязаны к контенту, а могут встретиться везде на сайте. ВОт для этого и нужны модификаторы
@@Frontcoder Другими словами, модификаторы не обязательно использовать по бэму для изменения цвета изначально? Если у меня одна кнопка то могу ли я написать все стили в классе объекта (тот же цвет и высоту) но в случае появления новых кнопок просто добавить модификатор который будет пкрезаписывать уже существующие параметры ( цвета, размера итд)?
@@Frontcoder но как же тогда разделение на сущности (кто? что?) и их параметры (какой?) ? Или суть бэма состоит в том, чтобы выстроить структуру наиболее эффективного наследования, где микс-класс отвечает за общую сущность, элементовый-класс за применение непосредственно в этом месте и модификатор-класс используется для придания дополнительного функционала. Таким образом, если нужно будет опустить одну из кнопок блока чуть ниже, то мы напишем в модификаторе этой кнопки марджины, чтобы это не задевало остальные кнопки блока?
Классы удобнее через csstractor добавлять,понятно по коду что за чем написал в HTML по БЭМ очень слабо рассказал,большая часть видео по стилям а не про БЭМ
![ร้อยพ่อพันแม่ - WanMai [Official MV]](http://i.ytimg.com/vi/XY2pNYASEbg/mqdefault.jpg)
Вы наверное первый сняли видео с подробным объяснением про верстку под БЭМ-у элемента сложнее чем nav>ul>li >a
Большое спасибо.
Добрый день. Спасибо за ваш комментарий. рад, что вам нравится!
Анатолий, спасибо, что прислушались и записали это видео! Большой лайк!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Определённо топчик! Помог структурировать хаос в голове)
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится
о бог ты мой)) десятки видео, часы за документации и все равно каша в голове. а теперь все стало на свои места! ЛУШЕЕ объяснение БЭМ!!! спасибо
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Классная подача, благодарю!
Очень приятный и чистый код. Смотреть - одно удовольствие
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Спасибо за качественное видео, но позволю себе комментарий:
- с т.з. семантики вместо подходящих по смыслу тегов используется div.
- там где говорили что мелкие элементы типа text можно отдельно не называть по БЭМ, не соглашусь, в случае адаптивной верстки блок карточки товара может выглядеть совсем иначе.
Я при этом упомянул, что я так делаю, и что БЭМ рекомендует давать классы каждому элементу. Все надо смотреть относительно текущего контекста
Спасибо что продолжаешь, ты молодец!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
Благодарю! Прояснились некоторые моменты!
Добрый день. Спасибо за ваш комментарий. Рад, что вам понравилось.
А почему product__info сделать не таблицой?
+1
Хорошее видео! Если ничего не путаю, то модификатор через 2 "--" применялся изначально, потом они перешли на "_" . В комбинации с препроцессором выглядело бы еще эффектнее.
по-моему..наоборот, было "_", а после, кто-то придумал писать через "--"
Подскажите пожалуйста, для соцсетей достаточно ли было в CSS написать ".social__link--twitter", вместо ".social__link.social__link--twitter"? Также по методологии Комбинированные селекторы не рекомендуются в связи с тем, что у них получается более высокая специфичность.
Множественные селекторы не рекомендуют использовать по причинам связанным с производительностью рендера страниц - особенностью работы с этим современных браузеров.
Это нужно либо запомнить для себя как догмат в случае если нет желания точно вникнуть в проблематику. И ни в коем случае не советовать людям делать иначе, не понимая почему этот догмат появился.
Или разобраться в том, как и почему существует такая рекомендация -
Проще всего понять самому, это взять страницу с вложенностью больше 32 и чаилдами больше 32, плюс файл стилей на несколько тысяч селекторов. И попытаться описать что то через множественные селекторы для корневых элементов. И посмотреть потребляемые ресурсы.
Тогда догмат о опасности множественных селекторов станет очевидным, даже на i7 с 64гб оперативной памяти. Потому что разбор селекторов браузером идет справа налево. Указывая множественный селектор вы создаете ситуацию при которой вероятность когда браузер будет вынужден перебирать ВСЕ ДОМ ДЕРЕВО от его крайнего элемента к корню крайне велика
БЭМ сам по себе, так же появился не только из за необходимости решения задачи инкапсуляции свойств обьекта с целью обеспечения его переносимости. Но и как эффективное средство минимизировать накладные расходы работы браузеров, при рендере html документа.
Спасибо за урок!
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
а зачем два раза одному и тому же блоку ширину задавать? (max-width и цшвер для .product__photo)
Здравствуйте! Подскажите пожалуйста как вы изменили цвета тегов? Может это какой-то плагин?
Это работа ide
@@Frontcoder то есть это уже встроено в редактор? Или всё-таки какой-то плагин для тегов?
А как так получилось, что элемент price__actions находится вне блока price?
Мой косяк. Это должен быть product__actions
Добрый день. все понравилось.
Есть пару вопросов:
1)Почему назвали title__small, блока title у нас ведь нету?
2)Почему класс social__link, если блок имеет класс socials а не social?
Добрый день.
1. Просто разбивка всех заголовков на свой класс. Возможно правилььнее было бы через модификаторы
2. Потому что общий блок это socials а отдельная иконка это social
Подскажите пожалуйста, Авокод покупаете ежемесячно? Возможно корпоративная версия?
Добрый день. Триал
@@Frontcoder спасибо за ответ. Каждые 14 дней регистрируете новый аккаунт?
В 19-ой строке сходу ошибка по БЭМ- класс обозначается в первую очередь, а уже потом все атрибуты.
Дальше смотреть на стал.
Не совсем понял про title__small. Получилось, что элемент вложен в элемент, такое в БЭМ разве разрешено?
Да, так можно
Спасибо за видео
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
А можно вместо миксов использовать модификаторы? Например, rating-stars--product
Нет, так как это совершенно разные вещи
@@Frontcoder Спасибо за ответ. Еще такой вопрос можно ли использовать элемент в таком же элементе? Например:
В документации такой информации не нашел
Почему btn--text-uppercase если uppercase может понадобиться не только на кнопке. Не правильнее ли будет назвать просто uppercase, что бы можно было применять и в простом тексте как дополнительный стиль
Добрый день. Это уже будут состояния элемента как is-active например. Глобальных модификаторов в БЭМ нет
Действительно, самое адекватное видео. А то все остальные идиотизм оторванный от реале или пустозвонство.
А как делать нейминг и вложенность для сложных составных блоков?
Например, joxi.ru/12Mloqtlo9a8mJ есть карточки, но в них раскидан как контент, так и оформиловка.
А вот про * есть нюанс, удобно прописывать так отступы, только надо указывать > * иначе вложенные теги тоже поедут, а нужно лишь блокам или элементам задать отступ.
Добрый день. Спасибо за ваш комментарий. Рад, что вам нравится!
На канале есть видео с версткой полноценных сайтов. Посмотрите. Там я все показываю
Есть вопрос, не совсем понятно зачем в БЭМ нужны модификаторы. Разве для качественного наследования недостаточно будет миксов блоков и элементов? Как пример классы кнопки: button form__button, где в 1 класс пойдет общая структура кнопки, во второй все остальное, включая цвет и отступы. Нужно понимать что кнопки срецифичны в дизайне и с большой вероятностью не будут отличаться многим от шаблонного класса button, а для небольшой коррекции можно будет стили дописать в классе элемента. Поэтому непонятно, зачем нужны модификаторы, где в отдельных случаях прописывается цвет:красный и про него забываешь на весь оставшийся проект
Но при том: поганится место в html, поганится место в sass ... не говоря уже о том, что функциональности это не прибавляет
Добрый день. Представьте что у вас есть 3 кнопки. Одинаковые по цвету, тексту и т.д. Но при этом отличаются только по высоте и они не привязаны к контенту, а могут встретиться везде на сайте. ВОт для этого и нужны модификаторы
@@Frontcoder Другими словами, модификаторы не обязательно использовать по бэму для изменения цвета изначально? Если у меня одна кнопка то могу ли я написать все стили в классе объекта (тот же цвет и высоту) но в случае появления новых кнопок просто добавить модификатор который будет пкрезаписывать уже существующие параметры ( цвета, размера итд)?
все верно. у вас есть базовый класс, а потом вы добавляете модификаторы для нужных свойств
@@Frontcoder но как же тогда разделение на сущности (кто? что?) и их параметры (какой?) ? Или суть бэма состоит в том, чтобы выстроить структуру наиболее эффективного наследования, где микс-класс отвечает за общую сущность, элементовый-класс за применение непосредственно в этом месте и модификатор-класс используется для придания дополнительного функционала. Таким образом, если нужно будет опустить одну из кнопок блока чуть ниже, то мы напишем в модификаторе этой кнопки марджины, чтобы это не задевало остальные кнопки блока?
если использовать бем, то простой css уже не катит, лучше всего в дополнении делать сборку с scss "&", будет в разы быстрее) удачи
Добрый день. ну тут идет речь не про сборку)) В сборке у меня SCSS
блоки же вроде через"-"делаются, а элементы "__"?
Спасибо. th-cam.com/video/4zt8qcZ1OXA/w-d-xo.html
Привык не к бэму а к пагу.
У меня тоже бывают такие смешные моменты))
Классы удобнее через csstractor добавлять,понятно по коду что за чем написал в HTML по БЭМ очень слабо рассказал,большая часть видео по стилям а не про БЭМ
каша чес сказать