Почему в chrome svg не применяется градиент?

Другой способ — «подогнать градиенты» под вьюпорт иконки: продублировать градиенты изменив им размер, например через gradientTransform — scale и соотнести каждый с соответствующей иконкой.

Еще один способ — объединить каждую иконку в одну фигуру (не через <g>, а юнионом в редакторе или clipPath'ом) и использовать дефолтный gradientUnits.

Как удалить мусор из header?

Содержимое хедера (содержимое буффера) передается в аргумент анонимной функции, в примере, это $o function($o) {…}

Как удалить мусор из header?

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

Куда семантичнее класть H1 — в HEADER или в MAIN?

В большинстве случаев так и есть (стоит класть H1 в header), но все же это лишь распространенный частный случай. Например, структура вида:

<header><nav></nav></header>
<main>
    <h1></h1>
    …
</main>

также будет семантически корректна. Проверить логичность структуры можно построив «Outline» документа и структуры заголовков. В спецификации контекст применения заголовочных элементов не ограничен тегом header (указан как Flow content).

Как на CSS сделать такой блок?

onjkeee, зависит от требований кроссбраузерности

Как сверстать эту часть макета?

Алексей, гуглите в сторону «timeline html css», а в непонятных случаях поглядывайте на w3schools.com

Как сверстать эту часть макета?

)

Что делать со шрифтами, как оптимизировать?

Рустам Байназаров, не обязательно «swap», зависит от стратегии отрисовки шрифтов (при подмене на схожий системный — на информационных сайтах чаще font-display: fallback).

Инструмент для авто-вставки в html WebP-версии изображения?

artegion, нет, написала галп-таск.

Микс БЭМ и bootstrap-сетки, это читабельно?

Импонирует ваш системный подход, порой именно его в верстке недостает. Спасибо за увлекательный мастер-класс!

Микс БЭМ и bootstrap-сетки, это читабельно?

Интересное замечание про «комбинируемость» как признак модификатора.
Например, в material-сетке (по БЭМ) кроме явного указания модификатором величины колонки, есть опциональная возможность комбинировать модификаторы указывающие величину колонки под разные ширины устройств. Подпадает под критерии «опционально и комбинируемо», но в результате да, выходит довольно громоздкая конструкция.
***
Если рассматривать ячейку (колонку) как отдельный элемент то, когда ей добавляем классы под адаптив, вновь получаем «классянку», визуально чуть менее громоздкую чем с модификатором. В моей практике зачастую выходит, что сетка не выделяется как сущность и классы смотрятся аккуратно. А когда на проекте Bootstrap то приходится совмещать методики, для сетки использую оригинальные Bootstrap-классы, а все нестандартное пишу по БЭМу.

Микс БЭМ и bootstrap-сетки, это читабельно?

Если взять первый случай с "глобальной" сеткой, как вы в ее классе передаете значение ширины конкретной ячейки сетки (количество занимаемых ею колонок)? Указываете его в примиксованном классе ячейки сетки через key-value-модификатор или пишите генерированные классы с разными ширинами как в Bootstrap? Если делать микс с классами ячеек аля Bootstrap не усложняет ли это восприятие html-структуры?
***
За этот год мне чаще стали встречаться заказы: «чтоб никаких бутстрапо-подобных классов, хотим чистый html по БЭМу», причем даже без миксов — только на обертках.
***
dom1n1k, спасибо, что делитесь опытом, всегда с удовольствием читаю ваши комментарии, полезные и обстоятельные пояснения!

Микс БЭМ и bootstrap-сетки, это читабельно?

Как мудрый опытный человек, подскажите, как обычно при верстке с БЭМ на маленьких проектах вы внедряете сетку? Я обычно сетку как сущность вообще не выделяю, просто вписываю ее как элемент БЭМ-блока:

.block
.block__inner
.block__grid
.block__title
.block__menu

Где __inner — обертка для ограничения max-ширины, __grid — флекс-контейнер. Уважаемый Декарт, как вы обычно вписываете сетку? Выносите ли контейнер в отдельный блок, чтоб миксовать с другими блоками?

Микс БЭМ и bootstrap-сетки, это читабельно?

Виталий, спасибо за развернутый ответ!

Там всего пара свойств, зачем их переопределять

По мнению автора сего творения, чтобы отделить: а) общие типовые правила сетки от локальных правил сетки применимых только к текущей сущности; б) стили позиционирования от стилей оформления.

• .row — это глобальный стиль сетки: флекс-контейнер с отрицательными отступами.
  
• .page-header__row.row — это локальный стиль сетки: кастомизированный под сущность флекс-контейнер (например, переопределяет align-items и margin), содержит только позиционирование.
  
• .page-header__row — не содержит позиционирования, задает наследникам общие стили оформления.
  

Теперь про приставку «col» в названии элемента — это, маркер конкретной ячейки сетки, в классах с таким маркером могут содержаться стили позиционирования, но не оформления. Оформление содержит дочерний элемент. Вроде, как бы и вполне БЭМ-элемент, но именование своеобразное.

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

Микс БЭМ и bootstrap-сетки, это читабельно?

Alex, в целом вашу мысль поняла и разделяю — «нечитаемо». В классическом БЭМе используют префикс для layout'а. Автор этой разметки попытался вписать еще одну абстракцию — уровень логики позиционирования в элемент и вышла каша. Спасибо!

Микс БЭМ и bootstrap-сетки, это читабельно?

Спасибо, уж давно изучено. Вопрос не в способе подключения Bootstrap сетки, а в читабельности предложенной методологии именования классов.

Как найти следующий/предыдущий элемент по селектору в пределах всего DOM?

65536, так по селектору же. Если не подходит, можно комбинировать с parentElement, children. Главное, определитесь вам обход дерева нужен в ширину или в глубину (т.е. чтоб не тормозило копайте в сторону: Алгоритмы. Обход дерева)

Как лучше всего верстать эти псевдоэлементы?

Ничто не мешает абсолютно спозиционированные псевдоэлементы вынести за "пределы секции". Поэтому ваше утверждение не корректно.

Как лучше всего верстать эти псевдоэлементы?

webodel, обычно, для секции делают абсолютно позиционированными псевдоэлементами.

Что писать в техзадании верстальщику?

Верно. Если что, могу помочь советом, обращайтесь: [e-mail]
Кстати, чек-листы — удобная штука для проверки верстки, например: https://nicothin.pro/criteria-of-quality-frontend/...