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

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

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

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

Принято!

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

Работа с git в vs code

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

Именно! Кажется вам понравится и это видео ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-ST1EvRemB_U.html

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

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

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

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

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

@@pepelsbey Вадим,😂

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Пока не кодил, скорее на вопросы отвечаю, см. прошлый ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9eAwN6z55M0.html

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

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

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

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

Сработало!

Есть два видео, которые могут ответить на ваш вопрос: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-vF3Ho6YJSbQ.html ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-_8MwZ_cgvZ8.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@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 то он также приводит все поля ввода к одному виду, хотя все дополнительные элементы что показывает браузер убрать будет сложно да. Понимаю что видео было совсем на другую тему и ни в коем случае не ставлю целью придраться, в этом демонстрационном проекте действительно разницы не было, просто взгляд зацепился при просмотре)

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

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

GitHub Light

Обычно QuickTime на macOS, но сейчас подключаю ноутбук к микшеру ATEM Mini Pro и пишу экран там, но это вам не нужно :)

Vadim Makeev просто показалось все так плавненько)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

GitHub Light

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

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

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

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

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

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