Как лучше и правильнее(для оптимизации) подключать css? Собрать весь css код (медиа, типографика, различные плагины, основной css ) в один файл, или подключать отдельно много файлов. Чем меньше файлов, тем меньше HTTP запросов, тем быстрее загрузится страница.
Разбиваешь css на два файла.
1) В одном хранишь общие стили (шрифт, фон, стили осн. блоков) и подгружаешь его перед body, что бы во время загрузки страницы, пользователь уже что-то видел и понимал, куда зашел.
2) Во втором оставляешь дополнительные стили, для модальных окон, иконок, комментариев и прочего. Инклудишь этот файл перед закрытием body, тем самым ускоряешь загрузку страницы.
Когда вы разрабатываете, вам логичнее разбить стили по удобной вам методологии, чтобы небыло огромных портянок из стилей. Потом таск менеджер, например gulp, во время сборки проекта в продакшен, автоматически сжимает и объединяет все в 1 файл. По поводу футера, лично мне эта идея не особо нравится. Стили это не то, на мой взгляд, что должно грузится из футера. Но это на усмотрение. Но уж точно 10 разных файлов css в продакшене это дурной тон.
Берешь и создаешь да css файла один header.css, а другой main.css
весь контент который влезает в первый экран стилизуешь в файле header.css, а остальное в main.css . Потом когда весь сайт готов берешь и минифицированный header.css вставляешь в head в тег style. Вот и все профит! Правда в HTML 5.2 можно подключать стили в конце перед body так-что решай самю Плюс первого варианта в том, что ты хакаешь google page speed и он показывает хорошие результаты. Можно автоматизировать с помощью Gulp-а
В идеале собрать все вспомогательные css в 1 файл и минифицировать и подключать в футере. Основной же файл стилей также минифицировать и подключать в head
Простой
