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