Один массивный CSS - или много маленьких?

Question

Простой вопрос, надеюсь.

У нас есть таблица стилей, длина которой превышает 3000 строк, и в результате при визуализации страницы наблюдается заметная задержка.

Вот вопрос: лучше ли иметь одну массивную таблицу стилей, которая покрывает все, или множество маленьких таблиц стилей, которые покрывают разные части страницы? (например, один для макета, один для выпадающего меню, другой для цветов и т. д.)

Это только для производительности, а не «что проще»

Answer 1

3000 строк? Возможно, вы захотите сначала поискать избыточность, ненужные подробные селекторы и другие проблемы с форматированием / содержимым. Вы можете создать текстовую таблицу стилей, таблицу стилей цветов и таблицу стилей макета, но это, скорее всего, не приведет к повышению производительности. Как правило, это делается, чтобы дать вам больше организации. После того, как вы ужесточили свои правила, вы также можете минимизировать их, удалив все форматирование, которое может сбить немного больше, но, вероятно, немного.

Answer 2

Ну, если вы разделите эти 3k строк на несколько файлов, общее время рендеринга не уменьшится, потому что

1. Все 3000 строк все еще нужно будет проанализировать
2. Для получения файлов CSS требуется несколько запросов, что замедляет всю проблему на другом уровне

Answer 3

Согласно это, вероятно, надежный источник одного файла, удовлетворяющий правилу 1 (минимизировать http-запросы). И не забывайте правило 10, уменьшайте js и css, особенно с монстром на 3000 линий.

Answer 4

Будет хуже, если вы разделите их из-за накладных расходов на дополнительные HTTP-запросы и новые соединения для каждого (я полагаю это поведение по умолчанию Apache для поддержания активности)

В любом случае, прежде чем что-либо произойдет, все это нужно загрузить и проанализировать.

Answer 5

Похоже, вы используете CSS очень неэффективно. У меня обычно есть таблица стилей от 400 до 700 строк, и некоторые сайты, которые я разработал, очень сложны. Я не думаю, что вам когда-либо нужно больше 1500 строк.

3000 строк кода - это очень много для правильного обслуживания. Мой совет состоит в том, чтобы найти вещи, которые имеют одинаковые свойства и сделать их подкатегориями. Например, если вы хотите, чтобы на странице был один шрифт, определите его один раз в теле и забудьте об этом. Если вам нужно несколько шрифтов или несколько фонов, вы можете поместить div font1 и обернуть все, что нужно этим шрифтом, в этот div.

Всегда храните CSS в одном файле, если у вас нет совершенно разных стилей на каждой странице.

Answer 6

Разделение этого файла монстра на более мелкие (макет, формат и т. Д.) Сделает разработку более эффективной. Перед развертыванием вы должны объединить и минимизировать их, чтобы избежать множественных http-запросов. Предоставление файлу нового номера (style-x.css) для каждого нового развертывания позволит вам настроить ваш http-сервер так, чтобы он устанавливал дату истечения в далеком будущем и тем самым сохранял некоторые дополнительные http-запросы.

Answer 7

усилия по загрузке нескольких CSS-файлов противоречат сложности (и, следовательно, скорости) синтаксического анализа, а также аспектам обслуживания

Если определенные подмножества файла монстра могут быть связаны с определенными HTML-страницами (и только с этими определенными страницами), тогда имеет смысл разделить на более мелкие единицы.

пример:

у вас есть домашняя страница семьи, и ваш all.css содержит все форматы для вашего собственного диапазона страниц, страниц вашего супруга, ваших детей и вашего питомца - все вместе 3000 строк.

./my/*.html     call ./css/all.css
./spouse/*.html call ./css/all.css
./kid/*.html    call ./css/all.css
./pet/*.html    call ./css/all.css

в этом случае довольно легко перейти на

./my/*.html     call ./css/my.css
./spouse/*.html call ./css/spouse.css
./kid/*.html    call ./css/kid.css
./pet/*.html    call ./css/pet.css

лучше поддерживать, легче передавать обязанности, лучше защитить себя от паршивых кодов: -)

Если все (или большинство) ваших страниц настолько сложны, что им абсолютно необходимо большинство из 3000 строк, то не разбивайте. Вы можете рассмотреть возможность проверки на «overcoding»

Удачи MikeD

Answer 8

Ознакомьтесь с правилами производительности Yahoo . Они подкреплены множеством эмпирических исследований.

Правило № 1 - минимизировать HTTP-запросы (не разбивайте файл - вы можете это сделать в целях обслуживания, но для повышения производительности вы должны объединить их обратно как часть процесса сборки). # 5 помещает ссылки CSS вверху (в ). Вы также можете использовать YUI-компрессор , чтобы уменьшить размер файла CSS путем удаления пробелов и т. Д.

Больше вещей (CDN, gzipping, cache-control и т. Д.) В правилах .

Answer 9

Единственный выигрыш в разделении вашего CSS - это загрузка каждой части параллельно. Если вы разместите каждый CSS-файл на другом сервере, он может в некоторых случаях получить небольшую скорость.

Но в большинстве случаев наличие 3000 строк кода CSS должно быть (немного) быстрее.

Answer 10

3000 строк не имеет большого значения. Если вы разделите их на несколько частей, их все равно нужно будет загрузить для рендеринга. Основное беспокойство - размер файла. У меня есть более 11000 строк в одном из наших основных файлов CSS, и размер составляет около 150 КБ.

И мы распаковали статическое содержимое, и его размер резко сократился до 20 КБ.