Как закэшировать css стили?

А как комп определит какие стили используемые? Это довольно сложная задача: стили наследуются, добавляются динамически с помощью js.

Лишнее это. Используйте webpack / gulp, чтобы собрать все в 1 min файл и этот файл будет закеширован браузером.

Вот в чем Ваша ошибка:
на каждой странице свой набор нужных css. Можно сделать под каждую только нужные и кормить браузеру нужный css файл. Но так как браузеры кешируют ресурсы, такие как css, то оказывается, что это менее оптимально. 1 закешированный файл со всем css чаще более быстро работает и сокращает запросы к серверу, чем куча мелких, но "требующих себя закачать".
Много есть действительно разумных вариантов оптимизации и можно книгу написать (критический css + асинхронно остальное и т.д.). Но если коротко:
смотрите в сторону gulp, объединения и минификации css, а не сепарации.