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

Question

[s_katala]

Как лучше подключить стили для производительности
в отдельный файл или непосредственно в сам html файл?

Answer 1

[Алексей]

• Если несколько страниц, то в отдельный файл. Будет кешироваться
  
• Если одна, то в том же файле
  

Comments

[Алексей Уколов]

Для одной страницы вдруг отпала нужда в кешировании? С чего бы?

[Александр Вульф]

Алексей Уколов: я думаю, тут имелось ввиду, что страница закешируется сразу с css.

[Алексей Уколов]

Александр Вульф: даже если и так, это неправильно — разные ресурсы нужно кешировать независимо.

[Алексей]

Алексей Уколов: Все верно, как и написал Александр Вульф . Хотя конечно для лендингов больших - стоит выносить в отдельные файлы. Чтобы не получалось монстрообразных файлов.

[Алексей]

Алексей Уколов: Почему неправильно? Меньше запросов к серверу: быстрее грузится и т.д.
Независимость имеет смысл только при обращении к файлам из разных источников. Но если страница одна...

[Алексей Уколов]

То, что нужно уменьшать количество запросов верно, неверно правило "одна страница - инлайн, несколько - внешний файл". Это никак не связанные сущности.

[Алексей]

Алексей Уколов: с этим трудно не согласиться)
Да, уточнение полезное думаю будет.

Answer 2

[Сергей Зеленский]

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

Comments

[Алексей Уколов]

Самый корректный ответ. Одно уточнение — с приходом хттп2 инлайнинг нужно заменять на server push.

[Сергей Зеленский]

Так он не как не дойдёт), а уже очень хочется на на него перелезть

[Алексей Уколов]

Я сейчас готовлю доклад на эту тему, если не забуду — скину ссылку на видео :)

[Алексей Уколов]

В целом — вполне себе дошел, надо только ие фолбечить

[Сергей Зеленский]

не забудьте пожалуйста, а вообще хорошо бы на почту ссылочку [e-mail]

[Сергей Зеленский]

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

[Алексей Уколов]

Поставил напоминалку, в начале октября скину.

Answer 3

[sergey]

Правило хорошего тона говорит: в отдельный файл

Comments

[Алексей Уколов]

Это не хороший тон, а понимание принципов работы веба.

[sergey]

Алексей Уколов: 100% согласен

Answer 4

[Андрей Верх]

Лучше и то и другое совместить, часть кода встроив в страницу, а часть подключив в конце страницы.
Можете почитать о критическом CSS.

Comments

[Сергей Зеленский]

Добавлю к ответу Андрей Верх если есть несколько файлов css то их лучше собрать в один
Андрей Верх
подключить в конце страницы?
вы имеете в виду style import в конце документа?

[Андрей Верх]

Сергей Зеленский: В конце страницы, значит где-то перед

[Андрей Верх]

body :)

[Алексей Уколов]

Стили валютно подключать только в шапке. В подвале их нужно грузить через js.

[Сергей Зеленский]

Алексей Уколов вот я про тоже

[Андрей Верх]

Алексей Уколов: Сергей Зеленский: С чего вы взяли? Подключать можно в любом месте страницы. Валидатор тоже не против.

[Алексей Уколов]

Андрей Верх: внешние стили - это метаданные, а они разрешены только в head (https://www.w3.org/TR/html5/document-metadata.html)

[Андрей Верх]

Алексей Уколов: Ок, то что в спеке написано, вижу. Но вы говорили о "валидности". Валидатор, даже предупреждения не выдаёт. Сами стили работают прекрасно в любом месте страницы. Какой смысл в использовании скрипта, который добавит стили также вниз?

[Алексей Уколов]

Он добавит их не вниз, а в шапку, как и положено. А сам будет подключен внизу. Таким образом стили будут загружены в самом конце и их загрузчик не помешает рендерингу страницы.
"Валидность" - это и есть соответствие спецификации. То, что какой-то валидатор не сообщает об этой ошибке, не делает её валидной в принципе. В браузерах много каких костылей понаставлено, чтобы исправлять за разработчиками ошибки, если бы их не было, браузеры работали и развивались бы быстрее.

[Андрей Верх]

Алексей Уколов: Да, я знаю такую "практику", её вроде даже Гугл рекомендует...Просто оговорился.

Спрошу иначе - если я пропишу стили перед body какие минусы я получу, кроме несоответствия спецификации? Вам хоть один известен? Может в каком-то браузере они не загрузятся или не отобразятся?

В моём понимании, костыль, это применение скрипта, который стили на страницу вставляет.

[Алексей Уколов]

Отвечу вопросом на вопрос - а вы уверены, что они везде загрузятся и отобразятся? Я таких случаев не знаю, но зачем рисковать?

[Андрей Верх]

Алексей Уколов: Я тоже таких случаев не знаю и даже намёка не слышал. Поэтому, можно сказать что уверен. Я меньше уверен в кроссбразуерности вёрстки на всём многообразии устройств, чем в моменте подключения стилей.

Использовать скрипт, и дублировать стили в noscript, только потому что в документации написано что это "метаданные", я не стану. И уж тем более странно, что назначение скрипта не объяснено ничем, кроме соответствия спецификации.