Как лучше подключать css?

Question

[Иван Соловьев]

Как лучше и правильнее(для оптимизации) подключать css? Собрать весь css код (медиа, типографика, различные плагины, основной css ) в один файл, или подключать отдельно много файлов. Чем меньше файлов, тем меньше HTTP запросов, тем быстрее загрузится страница.

Answer 1

[Nwton]

Разбиваешь css на два файла.
1) В одном хранишь общие стили (шрифт, фон, стили осн. блоков) и подгружаешь его перед body, что бы во время загрузки страницы, пользователь уже что-то видел и понимал, куда зашел.
2) Во втором оставляешь дополнительные стили, для модальных окон, иконок, комментариев и прочего. Инклудишь этот файл перед закрытием body, тем самым ускоряешь загрузку страницы.

Answer 2

[Сергей]

Когда вы разрабатываете, вам логичнее разбить стили по удобной вам методологии, чтобы небыло огромных портянок из стилей. Потом таск менеджер, например gulp, во время сборки проекта в продакшен, автоматически сжимает и объединяет все в 1 файл. По поводу футера, лично мне эта идея не особо нравится. Стили это не то, на мой взгляд, что должно грузится из футера. Но это на усмотрение. Но уж точно 10 разных файлов css в продакшене это дурной тон.

Answer 3

[Артур Карапетян]

Берешь и создаешь да css файла один header.css, а другой main.css
весь контент который влезает в первый экран стилизуешь в файле header.css, а остальное в main.css . Потом когда весь сайт готов берешь и минифицированный header.css вставляешь в head в тег style. Вот и все профит! Правда в HTML 5.2 можно подключать стили в конце перед body так-что решай самю Плюс первого варианта в том, что ты хакаешь google page speed и он показывает хорошие результаты. Можно автоматизировать с помощью Gulp-а

Comments

[Артур Карапетян]

лично я стилизую с помощью sass , который компилируется в min.css и мне удобно. Прокачай свои знания в Gulp

[Артур Карапетян]

в тег

[Артур Карапетян]

style

[Артур Карапетян]

Ребят, а почему у меня Тостер режет ответ?

[account-4]

Потому что ты код пишешь, для этого нужно тег соответсвующий поставить.

[account-4]

<style>

[Артур Карапетян]

Спасибо, друг!

Answer 4

[k0nsu1]

В идеале собрать все вспомогательные css в 1 файл и минифицировать и подключать в футере. Основной же файл стилей также минифицировать и подключать в head

Comments

[k0nsu1]

MaxKorz: Рекомендация от google pagespeed переносить блокирующие css файлы вниз

[k0nsu1]

MaxKorz: ниже аналогичный ответ. Выходит не я один так думаю

[Артур Карапетян]

MaxKorz: В HTML 5.2 можно помещать css перед закрытием body!

[Артур Карапетян]

Можно и даже нужно, а еще лучше пользоваться тем способом, который я описал в ответе ниже