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