Спасибо! Можете пожалуйста рассказать подробнее про модификаторы? Какие есть "зарезервированные" имена них. Как придумывать дополнительные имена, если у элемента, по задумке дизайнера, очень много вариаций внешнего вида. Например взять заголовок .card__title в блоке .card. К примеру дизайнер решил что будет 2 цвета карточек и два цвета заголовков (инверсия), карточки будут 3х размеров и соответственно заголовок будет иметь 3 варианта отступов. Текст обычный и заглавными буквами, и 2 варианта размера шрифтов. Пример конечно надуманный, но мне встречались несколько раз дизайны с таким огромным количеством вариаций для элементов и блоков. Подскажите как максимально правильно и рационально создавать модификаторы и как их правильно именовать, если их все равно довольно много. Этот вопрос меня интересует больше всего, как я стал пользоваться БЭМ. Сам БЭМ мне очень нравится и теперь не представляю верстку без него, но все равно хотелось бы улучшить свое качество организации классов модификаторов для блока и его элементов.
В HTML 5.2 добавили возможность подключать стили в конце страницы, можно уже сейчас это использовать и как поведут себя браузеры которые пока или совсем не поддерживают такой способ подключения стилей? Спасибо за ответ!
5:19 "... руками и возможны конфликты". Конфликты возможны, только если писать селекторы через пробел. Если же необходимо для элемента указать его хитрую ручную вложенность, то, если не употреблять миксы по БЭМу, можно пользоваться селекторами без пробелов типа .list__item.--in-root1-block или же эту вложенность воспринимать как модификатор и писать в качестве значения атрибута (использовать возможности CSS2.1), это уже iAMcss.
Ну как, как переносить блоки между проектами, если каждый дизайнер делает свои марджины, паддинги, расположение элементов? Всё равно ведь чуть ли не с нуля приходится всё переделывать. Или может я слишком буквально понимаю методологию? Далее, для каждого блока своя папка. Не совсем представляю, как это: получается, лендинг с 15 секциями на этапе разработки разрастается в огромный проект? Не очередной ли это маразм от мира фронтенда? Или БЭМ неприменим для лендингов?
Dmitriy Mamaev Но если добавить модификатор к body, то мы вернемся к использованию наследования, но ведь бэм методология этого не предусматривает? или в этом случае предусматривает?
Спасибо! Всё равно это выглядит очень теплично: из проекта в проект появляются одни и те же блоки, которые можно приспособить к проекту одним-двумя css-классами. Допускаю, что это может быть строка поиска, навигация, логотипы. А что делать с информационными блоками, где тексты располагаются то в одном месте, то в другом, то в столбик, то в два, то в три, может текста вообще не быть, только картинки. Может, я просто не могу постичь необходимый уровень абстракции для всего этого)) Посоветуйте пожалуйста что-нибудь почитать, чтобы понять, что БЭМ действительно ускоряет процесс разработки. Потому что сейчас это выглядит, как переписывание старой разметки раз за разом в каждом проекте, разве это быстро?) Или использование БЭМа обусловлено ТОЛЬКО удобством дальнейшей поддержки (тут я абсолютно согласна)?
С моей точки зрения, CSS модули, как менее радикальный способ избежать конфликты в CSS - один из лучших, на сегодняшний день. Преемущество перед бем - не нужно выдумывать названия для блоков, достаточно органично интегрируется с JS.
Если у меня есть две одинаковые разметки, но одна из них содержит 5 элементов на всю ширину, а другая нет, то мне по логике БЭМ-а нужно добавить каждому модфикатор. А используя обычное наследование - всего один класс родителю. И таких примеров можно привести немало.
Спасибо, очень актуально! А может кто-нибудь привести примеры "правильной" верстки по БЭМ-методологии, пожалуйста? Или где их можно посмотреть? Я имею ввиду сайты полностью, не только отдельные блоки.
Сам весь стек не использую и считаю его не естесвенным чтоли ) но очень люблю саму методологию наименования. вот пример от гугла, где поступают так же ) getmdl.io/components/index.html -
В чем преимущества БЭМ перед CSS Модулями? По моему, усложнение, это каждый раз писать блок, элемент и модификатор (header--menu--active), мне больше нравится CSS Модули
Во vue.js, с их подходом с однофайловыми компонентами css-modules это вообще отлично заходит. Один файл-один компонент и внутри у него стили для этого компонента.
Вроде очень удобно делать адаптив используя smartgrid (CSS Grid), но поддержка этих сеток не очень. Что использовать? Тот же bootstrap? Или по-старинке через медиазапросы?
Что значит используемый код повторно или другими? Это же просто классы, чтобы понимать что за блок мы описываем и проще было разбираться в коде. О чем постоянно говорят? Это же не какая то библиотека, чтобы ее повторно использовать. Пожалуйста дайте ответ, чувствую себя необразованность от такого
БЭМ это недотехнология . То что предлагает БЭМ ( многакратное использование модулей ) , уже давно реализовано в React , Angular . Только работодатель разработчикам на React платит 200 000 р. , а разработчикам на БЭМ 20 000.
без бэма в реакт-проекте разработчики занимаются деланьем_сайтов а с бэмом у нас высркокачественный конвеер где все делают как один человек. бем же это не только правила именования
Слушал и прослезился. К каждому проекту этот парень придумывал что-то новенькое. Апосля этого он будет нас учить. Так он еще и не сам до этого додумался? А рассказывает, как про пришествие апостолов. Если верстальщик так туп и с первого раза не поймет, что на любой странице существуют независимые блоки, то ему никакой бэм и джем не помогут.
Двусмысленность (преднамеренная или нет, не знаю) и правда есть :) Но да, одно из из значений "short" - короткометражный фильм. Думаю, здесь это и имеется ввиду.
Привет! Только начал изучение БЭМ, появился вопрос - возможно ли использовать связку БЭМ + bootstrap (или другой фреймворк)? В интернете оч мало инфы по этому поводу, а все примеры что есть - представляют франкенштейнов, которые ни туда ни сюда. Или же БЭМ не совместим с фреймворками и только самому все компоненты описывать?
Привет! Бум совместим со всем. На примере Bootstrap мы можем описывать интерфейс с помощью БЭМ, а функциональную часть будет брать на себя Bootstrap. Смешивать БЭМ и Bootstrap - нормально. Но из-за нехватки опыта, конечно, может получиться Франкенштейн.
![[Live] ศึกมหึมันส์มวยไทยสังเวียนเดือด เวทีมวยชั่วคราวสวนสยาม | จันทร์ 30 กันยายน 2567](http://i.ytimg.com/vi/pM1k6f7JXUc/mqdefault.jpg)
По промокоду «YouMeow» скидка 900 рублей на интенсив или программу профессии в Академии - tml.io/mbf87
Помню-помню: "Вы можете выбрать любую методологию для верстки учебного проекта. Главное, чтобы это был БЭМ" (Николай Громов). :)
Ага) или как меня устроит любой твой положительный ответ))
Первое видео о кодинге/верстке, где вместо ускорения 1,25 или 1,5 полезно будет даже замедлить))
Вы заметили, что на футболке изображен кулак с шестью пальцами?
Это кулак святого верстальщика!
это было не сложно, особенно когда ни слова не понял про бэм.
Вячеслав Медовый бля точно
Хм, уже 5 утра, почему бы не позадротить ролики по Вебу?
У него на футболке кулак с шестью пальцами 😂
Спасибо! Можете пожалуйста рассказать подробнее про модификаторы? Какие есть "зарезервированные" имена них. Как придумывать дополнительные имена, если у элемента, по задумке дизайнера, очень много вариаций внешнего вида.
Например взять заголовок .card__title в блоке .card. К примеру дизайнер решил что будет 2 цвета карточек и два цвета заголовков (инверсия), карточки будут 3х размеров и соответственно заголовок будет иметь 3 варианта отступов. Текст обычный и заглавными буквами, и 2 варианта размера шрифтов.
Пример конечно надуманный, но мне встречались несколько раз дизайны с таким огромным количеством вариаций для элементов и блоков. Подскажите как максимально правильно и рационально создавать модификаторы и как их правильно именовать, если их все равно довольно много. Этот вопрос меня интересует больше всего, как я стал пользоваться БЭМ.
Сам БЭМ мне очень нравится и теперь не представляю верстку без него, но все равно хотелось бы улучшить свое качество организации классов модификаторов для блока и его элементов.
Спасибо за подробный вопрос!
@@HTMLAcademyTV Чудесный, содержательный ответ.
@@DmitriyVereschagin ор
Очень кратко, ясно, понятно все. Спасибо за урок🤝
Да отстой этот бэм... Все css классы надо хэшировать вэбпаком
никто не спорит про хешировать.
без бэма на проектах где много людей не будет порядка.
Валим, рад видеть во-первых! Во-вторых, многие хорошие разрабы за рубежом не пользуются БЭМ. Почему?
ну Блок_элемент понятно...Что за модификатор, так и не понял...
[вопрос] а что ещё с transition не дружит, кроме text-decoration?
Спасибо за вопрос 🙂
Жаль, что для значений auto не работает. Например height: auto
font-weight, text-transform лучше это в процессе верстки узнавать т.к. есть свойства который раньше не анимировались и со временем стали
display: block/none;
В HTML 5.2 добавили возможность подключать стили в конце страницы, можно уже сейчас это использовать и как поведут себя браузеры которые пока или совсем не поддерживают такой способ подключения стилей? Спасибо за ответ!
Спасибо за вопрос!
Стили и так можно подключать в любом месте на странице
Но не нужно
Я так уже делал
есть ли репо на гитхабе, с таким каноничным кодом
Дикция хорошая, но он тараторит ппц...
5:19 "... руками и возможны конфликты". Конфликты возможны, только если писать селекторы через пробел. Если же необходимо для элемента указать его хитрую ручную вложенность, то, если не употреблять миксы по БЭМу, можно пользоваться селекторами без пробелов типа .list__item.--in-root1-block или же эту вложенность воспринимать как модификатор и писать в качестве значения атрибута (использовать возможности CSS2.1), это уже iAMcss.
Реквестирую шорты про использование заголовков h1-h6
Обязательно расскажем (:
Ну как, как переносить блоки между проектами, если каждый дизайнер делает свои марджины, паддинги, расположение элементов? Всё равно ведь чуть ли не с нуля приходится всё переделывать. Или может я слишком буквально понимаю методологию?
Далее, для каждого блока своя папка. Не совсем представляю, как это: получается, лендинг с 15 секциями на этапе разработки разрастается в огромный проект? Не очередной ли это маразм от мира фронтенда? Или БЭМ неприменим для лендингов?
Dmitriy Mamaev Но если добавить модификатор к body, то мы вернемся к использованию наследования, но ведь бэм методология этого не предусматривает? или в этом случае предусматривает?
Sweetest Surrender, да, предусматривает
Спасибо!
Всё равно это выглядит очень теплично: из проекта в проект появляются одни и те же блоки, которые можно приспособить к проекту одним-двумя css-классами. Допускаю, что это может быть строка поиска, навигация, логотипы. А что делать с информационными блоками, где тексты располагаются то в одном месте, то в другом, то в столбик, то в два, то в три, может текста вообще не быть, только картинки.
Может, я просто не могу постичь необходимый уровень абстракции для всего этого)) Посоветуйте пожалуйста что-нибудь почитать, чтобы понять, что БЭМ действительно ускоряет процесс разработки. Потому что сейчас это выглядит, как переписывание старой разметки раз за разом в каждом проекте, разве это быстро?) Или использование БЭМа обусловлено ТОЛЬКО удобством дальнейшей поддержки (тут я абсолютно согласна)?
Расскажите пожалуйста про Веб компоненты, CSS-модули и CSS -в-JS - Поподробней. Создайте обзорку с примерами =))) - Очень нужно.
История БЭМ: th-cam.com/video/UYcatp5_IxQ/w-d-xo.html
С моей точки зрения, CSS модули, как менее радикальный способ избежать конфликты в CSS - один из лучших, на сегодняшний день. Преемущество перед бем - не нужно выдумывать названия для блоков, достаточно органично интегрируется с JS.
BEM не нужен. Веб компоненты в массы.
github.com/styled-components/styled-components
www.polymer-project.org/
Спасибо вам за HTML Шорты. Отличный формат. Все четко и по делу.
элементы элементов - это БЁМ
(с) kizu :)
Делайте дальше) отличный формат
Что за 6-ти пальцевая кисть?!?)))))
Очень круто! Спасибо!
Приятный чувак
всё чётко объяснили спасибо
Спасибо за видео. Интересно было бы послушать про веб компоненты.
Если у меня есть две одинаковые разметки, но одна из них содержит 5 элементов на всю ширину, а другая нет, то мне по логике БЭМ-а нужно добавить каждому модфикатор. А используя обычное наследование - всего один класс родителю. И таких примеров можно привести немало.
Добавь модификатор родителю и задай стили элементам через вложенность. Какие проблемы? По БЭМу так делать можно.
Да Яндекс рулит...Однако о_О
"Это HTML шорты и Вадим Макеев"
Здравствуйте, а можно подробнее про веб компоненты?
Так что же смягчает буква ё? =) 4:17
Пожалуйста, больше видео о методологиях
Miss me?
Спасибо, очень актуально! А может кто-нибудь привести примеры "правильной" верстки по БЭМ-методологии, пожалуйста? Или где их можно посмотреть? Я имею ввиду сайты полностью, не только отдельные блоки.
яндекс :)
Как ни парадоксально, но Яндекс не лучший пример. А вот bem.info отличный пример
Сам весь стек не использую и считаю его не естесвенным чтоли ) но очень люблю саму методологию наименования. вот пример от гугла, где поступают так же )
getmdl.io/components/index.html -
вот сайтик от гугла на бэм - getmdl.io/ . И сама эта библиотека тоже используем бэм внутри.
Здорово, всем спасибо!
Было бы интересно послушать про Flex-магию и как она меняет (поменяет) стандартную разметку страниц.
Спасибо за вопрос!
Вадим левша? :)
Вадим, CSS Модули или БЭМ?
В чем преимущества БЭМ перед CSS Модулями? По моему, усложнение, это каждый раз писать блок, элемент и модификатор (header--menu--active), мне больше нравится CSS Модули
Кода веб-компоненты придут во всю силу, то они может просто изменят спеку css-modules и её все будут использовать.
Хороший комментарий, естественно CSS Модули в паре с компонентами
Во vue.js, с их подходом с однофайловыми компонентами css-modules это вообще отлично заходит.
Один файл-один компонент и внутри у него стили для этого компонента.
А разве в reactjs по другому? там ведь тоже, один компонент, один css модуль
BEM ruuulzzz! :)
Shadow DOM похоронит БЭМ
@Neo это оно и есть
на майке кулак с 6 пальцами
что за книга оранжевая справа?) И да - интересно было бы узнать что там за библиотека)
Книга «Пиши, сокращай» book.glvrd.ru/
спасибо)
"ЦЭ ЭС ЭС" facepalm
Спасибо, что делаете такой контент.
И, Вадим, это не шоу, это выпуск!
Oleksandr про БЭМ - это выпуск, а в целом - шоу, по мотивам американского «TV show», то есть сериал.
Насколько совместим БЭМ с семантическими тэгами HTML5? Можно ли и нужно ли использовать , , или все блоки делать только на дивах?
нет необходимости вешаться на теги.
бэм это вешание строго на имена классов и их сочетания
Вроде очень удобно делать адаптив используя smartgrid (CSS Grid), но поддержка этих сеток не очень. Что использовать? Тот же bootstrap? Или по-старинке через медиазапросы?
Спасибо за вопрос
bootstrap 4 самое оно.
Вопрос: Рекомендуют псевдоэлементы начинать с двойного двоеточия :: (::before например), допустимо ли использовать одинарное двуеточие?
Спасибо за вопрос!
Допустимо, и так и так.
Что значит используемый код повторно или другими? Это же просто классы, чтобы понимать что за блок мы описываем и проще было разбираться в коде. О чем постоянно говорят? Это же не какая то библиотека, чтобы ее повторно использовать. Пожалуйста дайте ответ, чувствую себя необразованность от такого
ты пишешь блок один раз а потом без проблем его можно перенести в другой проект и там ничего не развалится из-за этого.
БЭМ это недотехнология .
То что предлагает БЭМ ( многакратное использование модулей ) ,
уже давно реализовано в React , Angular . Только работодатель разработчикам
на React платит 200 000 р. , а разработчикам на БЭМ 20 000.
К чему это ёрничание? Что такое "разработчики на БЭМ"? Ниже правильно сказали: БЭМ это не технология, а методология.
без бэма в реакт-проекте разработчики занимаются деланьем_сайтов
а с бэмом у нас высркокачественный конвеер где все делают как один человек.
бем же это не только правила именования
Слушал и прослезился. К каждому проекту этот парень придумывал что-то новенькое. Апосля этого он будет нас учить. Так он еще и не сам до этого додумался? А рассказывает, как про пришествие апостолов.
Если верстальщик так туп и с первого раза не поймет, что на любой странице существуют независимые блоки, то ему никакой бэм и джем не помогут.
почему шорты а не трусы?
Short - по английски короткий, трусы - underpants.
Двусмысленность (преднамеренная или нет, не знаю) и правда есть :) Но да, одно из из значений "short" - короткометражный фильм. Думаю, здесь это и имеется ввиду.
У трусов можно ошибиться с ударением и получить нечто совсем другое
Привет! Только начал изучение БЭМ, появился вопрос - возможно ли использовать связку БЭМ + bootstrap (или другой фреймворк)? В интернете оч мало инфы по этому поводу, а все примеры что есть - представляют франкенштейнов, которые ни туда ни сюда. Или же БЭМ не совместим с фреймворками и только самому все компоненты описывать?
Привет! Бум совместим со всем. На примере Bootstrap мы можем описывать интерфейс с помощью БЭМ, а функциональную часть будет брать на себя Bootstrap.
Смешивать БЭМ и Bootstrap - нормально. Но из-за нехватки опыта, конечно, может получиться Франкенштейн.