Как делаете вы?Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
к каждой странице подключается ... сборщик, который их сливаетКакой ещё такой сборщик?
Через что оптимизировать?Через что хотите.
После оптимизации насколько удобно такой код поддерживать?Поддерживаете вы неминимизированные исходники, поэтому настолько же, насколько и до.
препроцессоры - чем они могут помочь?Прочитайте любую статью про препроцессоры, там всё объясняется.
"../img/slider.jpg"
min-width: 320px попадают все вышеперечисленные разрешения, а поскольку оно указано последним, то и применяется именно его стили.
.item-2:hover ~ .item-1, .item-4:hover ~ .item-3
span.line динамически меняется style="transform: translateY(0px);"
li:before {
content: ''; // у псевдоэлемента обязательно должно быть указано содержимое, пусть и пустое
display: inline-block; // ширину и высоту можно указать только блочным элементам
background-size: contain; // поскольку картинка намного больше контейнера, нужно явно указать её размер
background-image: url('https://image.freepik.com/free-icon/information_318-10929.jpg');
width: 50px;
height: 50px;
}Есть сгенерированный список без главного тега ul.Если нет ul, то это не список, а кучка невалидных бессмысленных тегов. Не надо так делать.
Круг в виде div, которому задано изображение в виде background-image.Если никакого контента внутри не будет, а задача его исключительно графическая, то лучше сделать это псевдоэлементом.