Как организовать стили в большом проекте?

Question

[photosho]

Хочу в проекте использовать sass, и пришла мысль разделить стили на 2 основные папки: "header" и "footer". В первом - те, что будут загружаться в самом начале, во втором - соответственно, те, которые будут загружаться после остального контента. Цель - ускорить загрузку сайта и, конечно, угодить Google PageSpeed'у. Подскажите, как это принято делать в больших проектах? Удобно ли редактировать стили при такой структуре?

Comments

[Антон Литвиненко]

обычно выбирают из стилей стили для первого экрана и инлайнят их

[photosho]

Антон Литвиненко, что туда входит? Размеры блоков, чтобы вырисовывалась примерная структура сайта, заменяющие шрифты из тех, что установлены в системе?

[Антон Литвиненко]

photosho, гуглите Критический css
https://medium.com/web-standards/critical-css-39e4...

[Сергей delphinpro]

2 основные папки: "header" и "footer".

Худшее название из всех, что можно было придумать. Любой разраб в первую очередь подумает о шапке и подвале сайта.
Логичнее назвать critical_css и main или еще как-то, но не так.

Answer 1

[Сергей delphinpro]

Разбивайте файлы на отдельные блоки. Создайте просто файлы critical.scss и main.scss. В main подключайте всё, в критикал только то, что необходимо для первого экрана.
Таким образом все ваши стили в основном файле будут организованы как обычно, но вы сможете создавать разные файлы critical для разных страниц.