strelok011

Версия css, которая умеет такие штуки, еще не вышла из черновиков https://habr.com/ru/articles/662355/
И как по мне - лучше такое не выпускать вовсе.
Если у Вас есть триггер для изменения состояния кнопки "тест 2", что мешает его расширить для выбора еще и "все посты"?
Вы пытаетесь размазать бизнес логику функционала страницы по разным местам, что выглядит просто ужасно.
Раньше пресловутый IE поддерживал выполнение скриптов в css, но благополучно выпилил.

скину ссылку на свой же ответ ранее https://qna.habr.com/q/1223280#answer_2254764

Оптимизация html и css по сравнению с оптимизацией png - бесполезная ерунда. Вы можете выиграть допустим 2-5 кб против 2-3 мб одного png, в условиях современного интернета этот выигрыш ничего не даст. Даже запрос на сервер может больше времени занять чем скачивание.
Необходимо обратиться именно к оптимизации png при этом желательно с минимальными потерями по качеству.
Советую для начала ознакомиться вот с этой статьёй How To Optimize PNG, а потом поискать инструмент поудобнее, просто погуглив PNG optimizer. Вот сравнение нескольких пакетных оптимизаторов. Я при необходимости оптимизации png использую RIOT, он может оптимизировать png, gif и jpg. Из личного опыта - советую попробовать первым делом оптимизацию палитры. Плюс есть не искажающие оптимизации (например, удаление мета-данных). Если используете прозрачность - она сильно добавляет веса в изображение, с ней тоже можно бороться.

Всё это хорошо, если у вас есть возможность оптимизировать изображения, статично размещенные на сайте.

Выбросить type number, написать свою валидацию на скажем yup или его аналоге.
И не тратить время.

Собственно, не вижу проблемы в выборе инструмента.
Если дизайнер не упоротый - будет рисовать всё опираясь на единожды отрисованные компоненты. Их должно быть вполне определенное количество, с фиксированным набором состояний.
Создаете пакет компонентов, заголовков, верстаете лейаут для размещения по сетке, всио. С чего тут придется тонны стилей держать?
Если есть опыт в стайлед - пишите в стайлед (он мне больше подходит по профилю, к примеру, удобно темами оперировать)

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

Можно вообще весь проект написать в одном файле, вебпаку всё равно.
Главный вопрос - кому вы этот код показывать будете и как долго поддерживать.
Суть разделения в отдельные файлы - не мешать мух с котлетами.
Общий подход - выносить повторяющийся код, отделять бизнес-логику от оформления, выносить типы.
Это - сложившаяся практика, опирающаяся на существующий опыт.
З.ы. А что значит "не отсвечивается"? Подсветка в этом коде не работает что ли? Есть плагины для многих ide.

попробуйте добавить вот это в класс
-webkit-backface-visibility: hidden;

Потому что гугл говорит, что вьюпорт вводился и поддерживается только мобильными устройствами, из-за того что у них есть экраны с высокой PPI (плотностью физических пикселей) и изображение на экране необходимо было управляемо масштабировать.
Десктоп подобные извращения не поддерживает, т.к. есть просто базовые значения и прямые руки у верстальщика.

пример scss
@apply bg-transparent #{!important};

попробуйте это

html {
  background-color: red;
  overflow: hidden;
  width: 100%;
}

body {
  height: 100%;
  position: fixed;
  /* prevent overscroll bounce*/
  background-color: lightgreen;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  /* iOS velocity scrolling */
}

Ну, хотя бы потому что добавляя класс "modal open" вы добавляете отступ на оборачивающий блок справа padding 8 px. Соответственно написанным вами стилям контент смещается и на него влияют оборачивающие стили, а вот блок тулбара у вас position fixed, эта конструкция вырывает элемент из потока и отступ всей обертки на него не влияет.

Где вы такой замшелый способ прибития футера к низу нашли? Делайте на флексах, контентной части флекс гроу 1, общему контейнеру с флексом минимальную высоту 100% и этого будет достаточно.

Я так понимаю, когда вы хотите отображать модалку и замораживаете скролл, у вас пропадает ширина скроллбара и картинка (если скролл был) начинает скакать. Так вот в случае, когда контента не достаточно на появление скролла, у вас ровно обратная ситуация возникает.
Почитайте про варианты блокирования скролла, возможно найдете более подходящее решение.

.heatmap-wrapper - добавь в стиль атрибут pointer-events: none;

А еще можно в стиле написать font-family: monospace;
В этом случае пользователь в любом случае увидит моноширинный шрифт, причем тот, который установлен у него в системе.

ругается на наличие в строке
--ms-grid-column [2]. уберите эту конструкцию или перепишите по правилам

Не нужно ничего вычислять. Ее нужно просто запросить. Это свойство clientHeight

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

Дополню немного куратора - ваше меню должно решать ВАШУ проблему.
Всякие образцы в интернете - могут решать а могут и не полностью. Работает ли адаптив для разных разрешений, поддерживается ли тач, сколько уровней вложенности, нужно ли скрывать скролл для длинных списков (и всё же меню - это именно список), нужно ли скрывать подменять десктопное меню на мобильное...
Когда составите список требований - тогда и только тогда нужно будет подбирать конкретную реализацию, либо опираясь на примеры пилить своё.
Халтура - она не универсальная :)

Нельзя использовать нестандартные шрифты. Только в виде растра.
1. внедрять нельзя
2. делать внешние ссылки на шрифт плохая идея, если письмо попадает в корпоративную почту, внутри изолированной сети доступа к внешнему хранилищу не будет, так же нужно учитывать, что корпоративные почтовые сервера могут с легкостью выкашивать всё подозрительное из писем, включая ссылки на внешние ресурсы. Так, к примеру, ведет себя gmail.
Гуглите "безопасные шрифты" для использования в рассылках