Шапка на гридах и флексах с гэпами и БЭМ

[@pepelsbey]

00:27 Разметка и стили шапки 04:31 Раскладка шапки на гридах 06:02 Раскладка поля поиска 11:53 Отступы между блоками 15:57 Вёрстка примеров поиска 21:04 Отступы между кнопками 26:11 Выводы и предыстория

[@JoKer-it3mf]

Здравствуйте Вадим! Восхищен вашей подачей! Недавно наткнулся на такие вещи как "Elm, ClojureScript, ReasonML". Могли бы вы поделиться своим мнением по поводу этих технологий? Благодарю!

[@pepelsbey]

Скажу сразу, я не программист. То есть я умеют что-то делать на JS, но мне интерфейсы ближе, чем алгоритмы. Так что вопрос не ко мне - я знаю, что это такое, но не мне что-то вам советовать.

[@interceptorlt1268]

​@@pepelsbey о, мне тоже больше по душе интерфейсы, чем js, но так то в реакты/ангуляры, простихоспади, php это я умею, но не хочу. И тут возникает проблема, что чисто разработчики интерфейсов (в простонародье верстальщики) особо никому не нужны, всем подавай js'серов. А то, что условный js'сер не умеет в фиксание визуальных багов на ios под её uiwebkit view - это никого не интересует. Может есть совет в какую сторону развиваться в рамках интерфейсов, чтоб это было востребовано?

[@verbs-otier-ru]

Настолько я обожаю этот канал, что он единственный из образовательных выигрывает у развлекательного контента, когда я захожу на KZbin что-нибудь посмотреть. Очень рад, что вы вернулись.

[@mirislamus]

Привет, Вадим рад что ты вернулся. Хотелось бы видео, про единицы измерения, как и где что лучше использовать

[@СашаЛьвович-ж2д]

Какое же доходчивое объяснение миксов в контексте независимых блоков по БЭМ. Словами не передать как меня это порадовало. Тайминг 13:30

[@СергейК-б6н]

Вадим такой человек вот внатуре эксперт в каждой вещи видит больше чем даже в доке можно вычитать ❤

[@nikolaifedotov5107]

Единственный человек на KZbin, у которого каждое слово бесценно! Не бросайте пожалуйста больше так на долго :)

[@TamaraNikolaevna]

Очень много полезной информации. Надо потренироваться, чтобы запомнить. Получается, в одной вёрстке можно использовать и flexbox, и grid. Объясняете классно!

[@pepelsbey]

Именно! Кажется вам понравится и это видео kzbin.info/www/bejne/iYWUdqmImtJ1lbc

[@sashabeep]

Нужно видео с обзором vscode. Ну и всяких плагинов для него

[@pepelsbey]

Принято!

[@capstanfearless]

Поддерживаю автора комментария!

[@angrybeaver3425]

Работа с git в vs code

[@MaksymMinenko]

По-моему, это не самый оптимальный вариант потратить время Вадима...

[@velyar]

Смотришь видео, всё понятно, всё логично, всё разложено по полочкам. Идёшь верстать и вся логика куда-то пропадает:) Спасибо за труды:)

[@andrei8299]

я так сверстал по 3-м урокам 3 разных макета, сделал конспекты, разобрал сложные для меня моменты. А потом начал сам с нуля и просто сел в лужу с header. Так что не знаю даже, как лучше учиться, наверно стоит сперва самостоятельно сверстать какой-то блок/элемент, а потом уже видео посомтреть и если надо отрефакторить код.

[@MaksymMinenko]

Огромное спасибо за эти (кодинг, реальные примеры) Ваши видео, Вадим! Смотришь и не верится, что в Ютубе (особенно в русскоязычном сегменте) может быть насколько качественный контент.

[@pepelsbey]

Вам спасибо, что смотрите :) Подписывайтесь, будет ещё

[@ВладимирКоршунов-ж1п]

Вадим, делай больше такого контента с реальным программированием. Мастерство вёрстки надо повышать!

[@vkuznetsov44]

Один из самые адекватных каналов по вёрстке) Спасибо!

[@returnobject]

открыл для себя этот канал совсем недавно и скажу что еще не попадался такой годный контент на тему фронтэнда. спасибо вадим за профессиональную подачу и просто за то что делишься опытом 🙏

[@Ruslan-ki4dn]

Сними пожалуйста о фокусе, свойстве outline и вот этом всем) как сделать красиво, подходы и как ты это видишь. Спасибо! Очень круто что вернулись такие ролики!

[@pepelsbey]

Есть план, расскажу!

[@b-o-t-l-y]

Самое лучшее, что со мной случилось за сегодняшний день - я увидел, что Вадим выпустил новое видео. ))))) С возвращением!!! Спасибо!

[@ГеоргийЖуравлев-к2ъ]

Вадим, я очень надеюсь, что Вы будете продолжать свой блог. Одна из самых полезных вещей в наполненном мусором ютюбе. Такие блоги должны заслуживать максимального внимания.

[@ВладимирМуравьев-з2ы]

Flex gap появился в хроме за флагом. Наконец-то!

[@andyvi3116]

Очень классное видео. Верстаю на гридах, но для себя почерпнул некоторые классные фишки, такие как грид авто флоу. Безумно полезно, Вадим, продолжай в том же духе. Хотелось бы увидеть реализации вёрстки карточек с одинаковой высотой, допустим в следующих выпусках.

[@ЕрболУтегенов-й5ю]

Дядя, очень годно!

[@Anodoree]

Забавный факт: подписан совсем недавно, но посмотрев именно это видео, которое выскочило просто в рекомендациях, решил глянуть на Патреон (где был приятно удивлён расценкам), и понял, что цвета уровней там очень неспроста!) Вот теперь интересно, в районе именно этого видео появился Патреон у Вадима, или, может, цвета добавились в это время, или просто какое-то магическое совпадение) А по теме, как всегда - шикарный разбор! Внимать инфо просто в кайф!)

[@pepelsbey]

Цвета для тиров на Патреоне взялись как раз из этих демок )

[@Anodoree]

@@pepelsbey благодарю за удовлетворение моего любопытства!)

[@svetlana_wo]

Как здорово, что вы к нам вернулись с новым видео ❤️

[@vladislavderzhavin2065]

Вадим, очень хороший звук. Спасибо!

[@VladimirSalygin]

Очень классно. Спасибо!

[@ГеоргийЖуравлев-к2ъ]

Инструменты отладки верстальщиков: 1) Новичок: border: 1px solid red; 2) Продвинутый: outline: 1px solid red; 3) Профешинал: outline: 1px solid palevioletred; :D :D

[@SYVlive]

4) стажёр: расширение pesticide для хрома ^_^

[@alexelkin2502]

суперпрофи: * outline-color: palevioletred *>* outline-color: palegreen *>*>* outline-color: teal ...

[@modusvivaldi7701]

...и добавить outline-offset: -1px;

[@АндрійГорбань-з9д]

Чудовий формат відео, побільше такого матеріалу )

[@dmitriyzyuzin7260]

Спасибо за видео. Похоже, я влюбился в гриды. Пора прекращать верстать всё на флексах)

[@forestspirit5446]

Вадим - раз в две недели видосы? мало мало малооооо... давай больше

[@pepelsbey]

Принципиально никакой регулярности, чтобы не вымучивать из себя. Есть время и хорошая идея - снимаю. Может и по два видео в неделю будет, кто знает :) Ну и сейчас была пауза потому, что сменил аппаратуру для съёмки и сотф для монтажа. Научусь пользоваться - будет проще.

[@denisholovko6797]

Добрый день, большое спасибо за видео! Было бы очень интересно послушать о :focus-visible

[@nagorny19]

У кнопок, конечно же, фоновый цвет должен быть какой-то дурацкий © Вадим Я как дизайнер, обязательно возьму это на вооружение ) Спасибо за видео

[@MaksymMinenko]

Вот это очень полезное видео, спасибо!

[@SamaraDjVitek]

Спасибо за видео! Как всегда интересно и познавательно, а главное - даёт повод к изучению чего-то нового!

[@bekamez]

Спасибо за видео). Еще как вариант во флексе гэпы можно делать с помощью псевдоклассов. .options__button:not(:first-child) { margin-left: 20px; }

[@pepelsbey]

Не наберёшься псевдоклассов на все нужные гэпы (

[@AlexandrShushunov]

@@pepelsbey Это не про гэпы, а про более читаемый вариант селектора .class + .class

[@pepelsbey]

Теперь понял. Только вот мне такой селектор не кажется более читаемым )

[@maksimlegit5264]

ещё с флексами можно юзать примерно так margin-left/right: 20px; колонкам и margin-left/right: -20px; флекс контейнеру

[@ProstoAkk]

Очень толково! Захотелось на Grid-ах что-то сделать, а то флексить надоело.

[@o.kiryukhin]

Спасибо! Опять шапку переделывать)

[@BossRus32]

По идее, у .options стили размещения по строкам и колонкам тоже, аналогично как и margin ранее в ролике, должны подмиксовываться им от шапки, т.е. быть в header__options

[@pepelsbey]

Да, вы правы. Я показал принцип, но не применил его сам, а стоило бы.

[@nikonovilya]

Спасибо тебе Вадим!

[@ParaAvis3]

Повезло след потоку академии) те кто на гридах будет верстать.) особенно мишку) он бы там как раз вписался. мне как ученику последнего потока на флексах пришлось повозиться)

[@AlexanderT89]

А уже известно, что последующие потоки будут на гридах? Блин, надо решаться и идти на курсы..))

[@sunnyday5187]

Спасибо, вы лучший(:

[@eidenblock]

Большое спасибо за твой труд.

[@alexelkin2502]

Большое спасибо за видео!

[@lionstar3189]

Жду ваши новые видео как ожидал серии игры престолов, до 7 сезона кончено же.

[@pepelsbey]

У меня пока никто не умер хотя бы

[@VladyslavZubko69]

Спасибо Вадим, крутой видос ❤️

[@user-ir5zd2jy9e]

gap для flexbox - класно, но в хроме только вот вот как за флагами появился, ура!! Кстати в FireFox иногда бывают проблемы с flex при печати. Хром иногда тоже косячит. Какбы уже давно не новая технология, но боляки еще есть

[@mrborodist611]

Спасибо Вадим, как всегда годнотища спасибо!

[@ivanm9674]

Отличное видео! Спасибо! Только у меня вопрос, если мы в .options описываем позицию разве это не тоже самае когда мы задаем margin? не должна ли позиция .options выведена в mixin?

[@pepelsbey]

Да, вы правы, адресацию в гриде стоило вынести в header__options и смиксовать с options.

[@darvin2710]

Вадим, спасибо за видео! А где можно узнать, какие шорткаты ты используешь при кодинге?

[@pepelsbey]

Есть два видео, которые могут ответить на ваш вопрос: kzbin.info/www/bejne/rHeWeaJsjq-GmLM kzbin.info/www/bejne/lWmwqI2VmMypkJo

[@modusvivaldi7701]

Вадим, огромное спасибо за видео! Было бы круто посмотреть Ваше объяснение таких вещей, как minmax(), fit-content(), и новых значений свойств, описывающих размеры: min-content, max-content, fit-content, available, и как всё это применять для продвинутой адаптивной вёрстки. Судя по примерам на MDN, мощь этих значений и функций огромна, но взять и с ходу применить на боевом проекте сложно.

[@AndreyMorkovin]

Вадим, привет! Ты говоришь, что на сайте вебстандартов используется генератор статики для статей. Интересно, какой именно. Гетсби?

[@pepelsbey]

Eleventy www.11ty.dev/, Gatsby пробовали и в ужасе сбежали. На 11ty, в частности, работает web.dev и много других сайтов.

[@AndreyMorkovin]

Vadim Makeev понял, большое спасибо за ответ.

[@wolazant]

Отличное видео, спасибо! Недавно отсмотрел целый курс на udemy созданный в таком стиле, когда происходит вёрстка реального проекта с небольшими вкраплениями теории и комментариями в процессе верстки. Это отличная идея курса для Html Academy. Русскоязычных таких я не видел. Он бы подошёл веб-программистам с пробелами в css и самое главное с пробелами в хороших паттернах использования css для вёрстки. Возможно и для начинающих но не желающих работать с наставниками студентов это тоже был бы отличный курс и он мог бы быть дешевле, чем обычные курсы на вашей платформе.

[@pepelsbey]

Мы уже делаем что-то такое в Академии, видели курс по анимации htmlacademy.ru/intensive/animation и вёрстке писем? htmlacademy.ru/intensive/email

[@wolazant]

@@pepelsbey Спасибо! Не видел их раньше.

[@maximchernenkov6876]

Вадим, лучше все-таки grid-column: 2/3 поставить - так понятнее и доступнее думаю)

[@pepelsbey]

Мне span 2 очень напоминает времена, когда я верстал на таблицах и писал rowspan=2, так что извините )

[@jorgen5462]

О, круто, кака раз гриды допонять хотел.

[@drewmorama]

Годно, продолжайте

[@pepelsbey]

Витебск, спасибо

[@drewmorama]

@@pepelsbey Вадим,😂

[@pepelsbey]

Вот вы поправили реплику и мой ответ теперь выглядит глупо :)

[@drewmorama]

@@pepelsbey просто я из Витебска, все норм)

[@_kie]

С возвращением! На интенсивах использовал твои уроки, наставники даже спрашивали, где ты всё это находишь? :)

[@pepelsbey]

Жизнь подсказывает :) Ну и новости читаю, где только могу

[@zaharavsievich5944]

Привет! Я слышал, что браузер читает и применяет селекторы справа-налево. Всегда боюсь использовать селекторы типа .class > * + * , потому что браузер сначала применит стили ко всем элементам, потом ко всем элементам, перед которыми есть все элементы, а уже потом применит к элементам, которые находятся на первом уровне вложенности элемента .class . Стоит ли так заморачиваться или браузер совсем по-другому обрабатывает селекторы и падения в производительности нет?

[@pepelsbey]

Мне кажется я ещё лет пять назад слышал реплику то ли Пола Айриша, то ли Алекса Рассела о том, что перфоманс CSS-селекторов оптимизировали настолько, что сейчас нужно исхитриться, чтобы написать медленный селектор. Допускаю, что можно создать такое DOM-дерево, в котором такой селектор будет медленный, но сначала по перфомансу браузера ударит само дерево :)

[@zaharavsievich5944]

Vadim Makeev хах! Я понял, спасибо)

[@Necroomsk]

Я обычно в таких случаях использую .class-children:not(:last-child), а вот о варианте .class > * + * никогда даже не задумывался

[@Kempriol]

а на сколько костыльно будет для потомков использовать flex-basis: calc(25% - 10px); а в родителе justify-content: space-beetwen, если, как в примере, известно количество?

[@pepelsbey]

Выглядит весьма костыльно, я бы лучше отступы вставил через звёздочки

[@Михаил-п3о9ь]

Расскажите пожалуйста про сборщики проектов, слышал только про gulp. Интересно узнать не по настройку и работу с ними, а о возможностях этих штуковин и для чего они нужны

[@DimitarRad]

Спасибо, Вадим. Для такого контента, как по мне, слишком короткие видео. Я бы смотрел часами ;)

[@pepelsbey]

А вы приходите на лайвы, они часовые )

[@DimitarRad]

@@pepelsbey К сожалению, не знаю о чем речь. Вы там тоже кодите?

[@pepelsbey]

Пока не кодил, скорее на вопросы отвечаю, см. прошлый kzbin.info/www/bejne/b5akqIFsr5pog5I

[@capstanfearless]

Вадим, спасибо за видео, узнал много нового. У меня вопрос - в настоящее время уже можно использовать `display: grid` на всю катушку? И вопрос про атрибут loading="lazy" у картинок у хрома, стоит ли его использовать сейчас? Спасибо.

[@pepelsbey]

Можно вам гриды или нет - это вам скажет только ваша статистика. Атрибут loading=lazy уже работает в Chrome и Firefox, так что смело используйте - но только осознанно, как меру оптимизации, а не атрибут по умолчанию.

[@MaksymMinenko]

Получается, что align-items во флексбоксе меняется в зависимости от того, как задать направление флекса, а в гриде всегда идет по оси колонок, я правильно понимаю?

[@pepelsbey]

Да, в гридах тоже можно поменять автораскладку, но это не то же самое, что ось во флексах codepen.io/pepelsbey/pen/VwPLywx

[@MaksymMinenko]

@@pepelsbey В последней секции косяк там с названиями классов. :) Причем это на самом интересном месте. ;) А вообще, спасибо! Я этого (что в гриде не меняется) не знал.

[@Necroomsk]

Доброго времени суток. Очень люблю гриды, но как на счёт поддержки их в ie? Часто приходится верстать кросбраузерно с учётом ie9, по тому стараюсь использовать display:table, который поддерживается везде

[@Necroomsk]

Да, забыл написать: спасибо за видео, как всегда смотрел с большим интересом)

[@pepelsbey]

Если вам нужно поддерживать IE любой версии, гриды лучше не трогать. В IE10-11 есть флексы, но в вашем случае с IE9 (соболезную) лучший вариант - это dispay: table или display: inline-block.

[@Necroomsk]

Спасибо за ответ, убедился, что всё делаю правильно. И да, есть такие товарищи, которым обязательна поддержка ie9, а некоторые категорически против bootstrap, он мол на сео плохо влияет. Как я не пытался, доказать обратное не получилось

[@dimadjunaev]

Как вариант можно же было написать .options__button:not(:first-child) { margin-left: 20px; }, верно?

[@romankonashenkov1498]

Вадим, что за тема для vscode?

[@pepelsbey]

GitHub Light

[@ВладимирМуравьев-з2ы]

Вадим, по поводу доступности вопрос - есть ли какие преимущества использования label с классом sr-only, вместо aria-label? Недостатки вижу - лишний DOM элемент и генерация уникального id, когда форма берется из шаблона и используется несколько раз на странице. Или действительно лучше использовать aria-label?

[@pepelsbey]

В целом, подход с элементов label нагляднее, работает с онлайн-переводчиками, но я иногда использую aria-label. Мне кажется, что если у вас хотя бы какая-нибудь шаблонизация, то проблем с генерацией id быть не должно.

[@ВладимирМуравьев-з2ы]

@@pepelsbey Спасибо за ответ. Тогда пока помучаюсь с label.

[@jorgen5462]

Вадим, если можно, рассмотри фреймворки для верстки. Лично я всегда был их тихим противником, но при необходимости быстрой разработки вроде как полезно? Некоторые просто сетку используют...

[@pepelsbey]

Тут не ко мне, я умею верстать руками, а фреймворками пользоваться не умею и не понимаю зачем.

[@jorgen5462]

@@pepelsbey спасибо. Для меня это ответ на вопрос)

[@danmelnichuk4318]

Вадим, спасибо за видео! Но есть вопрос к БЭМу в классе options. Ты указал там grid-row-start и grid-column, добавив блоку информацию о его расположении. Я правильно понимаю, что такое лучше делать миксом .header__options?

[@pepelsbey]

Да, вы правы, упустил этот момент, но к счастью показал принцип :)

[@modusvivaldi7701]

@@pepelsbey (Слегка оффтоп) Если у блока задано свойство width в процентах, это внешняя или внутренняя геометрия? В каком классе должно находиться такое width в пределах БЭМ-микса: в блоке или в элементе родительского блока?

[@lenaryan]

Как ни анекдотично, но всё же - смеюсь на слове "лопата"...)

[@pepelsbey]

Сработало!

[@it_doc2319]

Шикарная информация! Спасибо большое, Вадим) У меня вопрос, а для чего вы задаёте класс head? Это именно у вас такое правило или и на другие практики это распространяется?

[@pepelsbey]

Если вы про , то это я просто обозначаю блок в БЭМ-нотации, чтобы потом делать его детей header__search и т.п. Опираться на имена тегов - более хрупкий подход.

[@it_doc2319]

@@pepelsbey Не я про то, что вы в теге head написали класс page.

[@pepelsbey]

Это был тег :) Дело в том, что его тоже можно оформлять, а опираться на имя тега не очень единообразно, поэтому я делаю блок page и его элемент page__body.

[@AlexKozack]

А что за редактор? VSC? Что за плагин для плавного курсора?

[@pepelsbey]

Мне все почему-то говорят про плавный курсор - я ничего специального для это не делал, кажется. Да, это VS Code на macOS, может он всегда так работает или это особенности записи экрана.

[@dobermanpharaoh7567]

а почему нельзя было использовать normalize.css для кроссбраузерной вёрстки, чтобы привести несоответствия стилей к единому знаменателю?

[@pepelsbey]

Не даст вам normalize.css кроссбраузерности, только выровняет какие-то дефолты, но заодно замусорит панель в отладке. Я не вижу причин втыкать в свой код большие части чужого с мнениями. Я лучше скопирую из него нужные мне части и поставлю конкретным блокам, а не глобально. И то, если нужно.

[@indagadir]

Спасибо! Пара вопросов: 1. 6:58 - по умолчанию значение атрибута type для button и так submit. Допустимо ли его явно не указывать? 2. 11:07 - магические отступы у инпута же должны помочь решить normalize.css и reset.css?

[@pepelsbey]

Атрибут type у кнопки слишком опасный, чтобы полагаться на умолчание. Когда крестик закрытия окна с формой может отправить это окно из-за неудачной вложенности или плохо закрытого тега, то лучше указывать тип кнопки всегда. Такой у меня принцип, рекомендую.

[@pepelsbey]

Я не очень люблю включать файлы, в которых группа малоизвестных мне людей решила за меня, что мне нужно :) Ну и глобальные стили тоже не добавляют переносимости вашей вёрстке.

[@SomeTimesCoding]

Вадим, спасибо за видео! Вопрос по гэпам во флексах. Если я правильно помню, "совиный" селектор * + * не подойдет, если мы разрешаем перенос на другую строку (flex-wrap: wrap), т. к. первый элемент на второй строчке также получит гэп. Как правильно обходить такие моменты?

[@pepelsbey]

Вы правы, тут уже нужны гэпы (

[@SomeTimesCoding]

@@pepelsbey, иногда может спасти отрицательный margin у родителя и соответствующий margin у вложенных элементов. Более детально такой трюк описан на MDN: Making things wrap, раздел Creating gutters between items.

[@omarkertis5294]

Почему не &:not(:first-child) { margin: ... ?

[@pepelsbey]

Нипочему :) Одну и ту же задачу почти всегда можно решить разными способами.

[@timurkhudiyev]

.el + .el - вот оно че)

[@detro1821]

не считаете ли вы что от margin-left, top стоит отказаться и использовать только right, bottom

[@pepelsbey]

Не думаю, что такое правило на самом деле поможет.

[@meg6pat]

В конце прям детектив про Safari. Но что с футболкой? Фоновую стенку покрасили, а переодеться забыли?

[@pepelsbey]

Это такая молодёжная мода

[@olkhovikmi]

Как называется тема в vscode?

[@pepelsbey]

GitHub Light

[@MrToshkin]

Вадим, заметил что некоторые верстают с обязательным присвоением класса если необходимо обратиться к элементу. Например в css не писать обращение к body, а обязательно к .body или .page__body. Либо не обращаться к вложенности .header__article p, а обращаться непосредственно к .header__article-p. Почему так? Ведь данные примеры не добавляют читаемости коду, вложенность лишь одна.

[@pepelsbey]

Это такой приём из промышленной разработки, который захватил умы фронтендеров уже давно. Чаще всего это связано с БЭМ и позволяет вам описывать классами исключительно визуальную составляющую интрфейса, а теги использовать более гибко. Почитайте про БЭМ здесь, станет понятнее ru.bem.info/methodology/quick-start/

[@ndrewhas]

Вадим привет. Не приходилось ли тебе встретить багу в Firefox: в верстке интерфейса чата (например), когда в окне сообщений делаешь column-reverse, чтобы сообщения начинались снизу и ползли вверх - пропадает вертикальный скролл. bugzilla.mozilla.org/show_bug.cgi?id=1063967

[@pepelsbey]

Звучит печально, подписался на баг в трекере. Вот активный: bugzilla.mozilla.org/show_bug.cgi?id=1042151

[@kolyaraketa8300]

Даешь уроки по гридам

[@baileysli6235]

8:46 А чому не type="search"?

[@pepelsbey]

Обсудили ниже, посмотрите в комментариях (не получается дать ссылку)

[@dahamyr]

Вадим, почему input type text, а не input type search? У него есть дополнительные фишки в стиле специфичной кнопки ввода на мобильных. И почему aria-label, а не title?

[@pepelsbey]

Поле type=search проблематичное, лучше использовать атрибут inputmode=search developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

[@pepelsbey]

Атрибут title плохой, он внушает разработчикам ложную идею, что пользователи наведут, увидят подсказку и им станет понятно. Но на мобильных не навести, а для скринридеров это работает нестабильно. Поэтому лучше явно говорить: я добавляю доступный лейбл для скринридеров с помощью атрибута aria-label.

[@dahamyr]

​@@pepelsbey "type=search проблемотичное". Бесспорно, есть дополнительные сложности со стилизацией (и ещё некоторыми вещами adrianroselli.com/2019/07/ignore-typesearch.html), но не будет ли игнорирование стандартов вредным? Этот тип поля добавлен в официальную спеку и рекомендуется WHATWG, а все проблемы с ним как всегда решаем workaround'ами и PRами в спеку. Вы не думаете, что лучше использовать стандарт и прикладывать усилия к тому чтобы делать его лучше, чем просто игнорировать его потому что он проблематичен? К тому же inputmode не поддерживается никем кроме хрома (caniuse.com/#search=inputmode) в то время как type=search поддерживается даже IE10 несмотря на то что inputmode это изначально затея майков

[@pepelsbey]

Стандарты тоже ошибаются. Атрибуты inputmode или enterkeyhint - это способ разделить монолитные решения «всё в одном» (type=search, date, email) на удобные части. Теперь вы можете сами выбрать какую клавиатуру показать и какую валидацию (pattern) использовать. То есть нет никакого преступления в том, чтобы не использовать type=search, преступлением будет не помочь или даже помешать пользователю. Как и у вас, так и у стандартов - это основная цель.

[@mefesto_]

А зачем классы на тегах HTML и BODY? Они же всегда в 1 экземпляре на странице. Можно по тегу обращаться.

[@pepelsbey]

Для последовательности: если для всего используются классы, но не нужно вспоминать, кто сколько раз на странице используется. Плюс бывает, что нужно сдвинуть контейнер вглубь или нет доступа к шаблону - тогда можно просто перевесить классы.

[@mouratibraguimov7964]

На сегодняшний день, "column-gap" и "gap" у флекса работают в последних версиях Chrome, Firefox, Opera, Edge. Safari не смог. Вот мои стили, codepen.io/coder_space/pen/QWKENwK Информация на caniuse не соответствует действительности. Еcли им верить, то gap работает только в Edge, Firefox и Chrome. Написано что в версии TP (полагаю, что это текущая версия для тестеров) будет поддержка гапа для Сафари.

[@Minobi]

Вадим, а почему input type="text" а не input type="search" для поля поиска? Так ведь будет более семантично или есть какие-то подводные камни?

[@pepelsbey]

«Семантично» это сомнительная цель. «Удобно пользователю» (или полезно проекту) - совсем другое дело. У type=search есть принципиальная проблема: некоторые браузеры начинают поверх таких полей рисовать всякие скругления, кнопочки и вообще усложнять вам жизнь, а пользователю дают кнопку. Чтобы получить кнопку без сложностей, лучше использовать атрибут inputmode=search developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode

[@Minobi]

@@pepelsbey Согласен, что главное это удобство пользователя) Специально проверил сейчас работу атрибута inputmode="search", на iOS Safari 13 (на других мобильных браузерах проверить не могу сходу) кнопку Search на клавиатуре мы с ним не получаем, просто нейтральная кнопка Go, как и без него, если input завёрнут в form (накидал быстрый пример для демонстрации codepen.io/Minobi/pen/QWjaxRP) а о той ссылке что вы дали видно что поддержка его отсутствует у настольных Firefox и Safari, если даже забыть об IE, так что не могу согласиться что inputmode="search" является полноценной заменой input type="search". Часть проблем с другим внешним видом поля input type="search" решается стилями, а в реальных проектах поля ввода обычно и так полностью стилизуют, ну и если используется normalize.css то он также приводит все поля ввода к одному виду, хотя все дополнительные элементы что показывает браузер убрать будет сложно да. Понимаю что видео было совсем на другую тему и ни в коем случае не ставлю целью придраться, в этом демонстрационном проекте действительно разницы не было, просто взгляд зацепился при просмотре)

[@pepelsbey]

Хотите кнопку «Search», добавьте атрибут enterkeyhint="search", см. html.spec.whatwg.org/multipage/interaction.html#input-modalities

[@Minobi]

Согласно caniuse enterkeyhint атрибут поддерживает всего лишь iOS Safari 13.4+ так что сложно рекомендовать его для продакшена( Благодарю за ответы, всегда узнаю что-то новое благодаря вам. Не осмеливаюсь продолжать не относящуюся к теме видео дискуссию, возможно тема полей ввода могла бы быть темой одного из следующих видео на вашем канале.

[@djon8810]

На счет замены gap. Я делаю так: .options__button:not(:last-child)

[@RedkeiGost]

Насколько нормально добавлять тегу класс с именем тега, header.header? Я верстал в начале 10х и мне это странно.

[@pepelsbey]

Думаю, вы должны были застать БЭМ, вот я и верстаю по этой методологии. Плюс может быть не один на странице. Ну и как-то не очень последовательно: приходится думать - это уникальный тег на странице или нет? Если уникальный - тег, если не уникальный - класс. А если тег нужно будет поменять. В общем, так удобнее.

[@RedkeiGost]

@@pepelsbey Спасибо за ответ. Да помню. Коллега говорил "ну, вот как ты обратишься к главному заголовку сайта, если он не имеет .main_taitle?", а я "h1 и есть мэйн тайтл". Я ретроград, который считал, что бэм избыточен для малых сайтов, добавляет излишнюю вложенность и кучу ненужных классов. Но я не собираюсь спорить о методике, которая победила и завоевала. И не сочтите за грубость, это просто воспоминание. Вот, за что бы я был благодарен, так это за рекомендации актуальных книг по css. Даю совет ребенку знакомых по изучению верстке, раньше бы предложил почитать что-нибудь вроде Итана Маркотта, но он устарел. Вот, пришел посмотреть, как тут Вадим Макеев без флоэтов колонки делает (посмотрел, понял и просветился). Раньше на на web-standards.ru был раздел "рекомендуемые книги". А щас нету.

[@pepelsbey]

Задачи с тех пор усложнились, просто поверьте :) Из книг: debuggingcss.com/ www.smashingmagazine.com/printed-books/

[@RedkeiGost]

@@pepelsbey отладку css утащил, спасибо. А в издательстве Smashing Magazine что бы порекомендовали? За тайпскрипт я сам расскажу. Может не так хорошо, как в книге, но ребенку (20ти лет) зайдет. Inclusive Components наверно норм книга для новичка.

[@vkuznetsov44]

Кстати, я вот столкнулся с проблемой, как сверстать на гридах такую адаптивность табов yadi.sk/i/C5-32wawqYqv1w (когда сами табы на десктопе располагаются сверху таб_контента). Возможно это будет интересно многим, так как дизайн-решение достаточно типовое.

[@barr.mrjohn]

единственное мне тут подсветка не понравилось ( а так всё классно

[@pepelsbey]

Подсветка в чужом редакторе редко нравится, тут ничего не поделаешь )

[@egoist2956]

like

[@dimovich85]

Исходники видео где-то 1.5 часа были? :)

[@pepelsbey]

Нет, уложился в полчаса и без дублей в этот раз :)

[@dimovich85]

@@pepelsbey это надо уметь так записывать)

[@asmint1987]

Вадим, к сожалению если строки врапаються, то селекторы из видео мало помогают(

[@pepelsbey]

Если строки врапаются, то вам помогут только гриды (

[@СергейК-б6н]

Я для проверки пишу цвет Red потому что если и его не видно значит че то не так 😅

[@pepelsbey]

Попробуйте tomato: результат почти такой же, а звучит круче

[@Uncaught_in_promise]

какой смысл, если отсутствует адаптив?

[@pepelsbey]

Такой, что это не «вёрстка адаптивной шапки», а «гэпы в гридах и флексах»

[@rinat9685]

Я не силен в БЭМ, но разве нельзя было для header сделать так: .header > *:not(:last-child) { margin-right: 20px; }

[@pepelsbey]

Можно и так да, но это магия, по сравнению с простым column-gap: 20px

[@SingleFeniks]

Гриды - хорошо, но пока flexbox наше всё. #ieсдохни Отдельно соболезную бедолагам, кому нужно поддерживать ie9.

[@ЕвгенийУгланов-ш2л]

100500 лайков

[@angrybeaver3425]

Вадим, хорошо растет щетина, тебе нужно отпустить бороду!

[@pepelsbey]

Не, я помято-лохмато с ней выгляжу, не нужно )

[@lomkuvaldych]

У меня БЭМ ассоциируется с острой формой классянки.

[@pepelsbey]

Поначалу и правда страшновато, но потом втягиваетесь. Гибкость перевешивает неудобство с классами.

[@alexelkin2502]

Удивительно, откуда берутся противники классов, часто их встречаю в комментариях в разных местах. вот буквально только что принесли на переделку баннер, в котором какой то фрилансер на классах сэкономил - задал стиль для дива - position: abosolute; что бы всем дивам внутри баннера одинаковые классы не писать... представляете что стало с сайтом на который такой баннер вставили?

[@danielkhachaturian]

Какой смысл давать классы html и body, это уже жир, я считаю, к ним можно обратится по тегу, так как они единственные на странице, в одном экземпляре

[@pepelsbey]

Да как хотите :) Мне нравится последовательность и не нужно считать сколько тегов на странице: всегда классы и всё.