Должен ли я разделить большой файл медиа-запросов CSS на отдельные файлы для каждого размера экрана?

Это немного зависит от того, чего вы хотите достичь: вы пытаетесь ускорить загрузку своей страницы или пытаетесь упростить разработку?

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

Если вы хотите, чтобы страница загружалась быстрее, чем вам лучше всего, было бы свести к минимуму количество запросов, так как накладные расходы на запросы довольно велики. Кроме того, вы могли бы сохранить версию разработки для себя и предоставить минимизированный css в Интернете (я нахожу YUI хорошим методом: http://www.refresh-sf.com/yui/).

Далее я бы попытался оптимизировать сам css. Вы можете попробовать объединить классы, которые очень похожи, например:

.bold-and-italic { font-weight: bold; text-style: italic; }

Может быть преобразован в:

.bold { font-weight: bold; }
.italic { text-style: italic; }

Единственное, что вам нужно немного изменить html с <span class="bold-and-italic">foo bar</span> на <span class="bold italic">foo bar</span>

Я могу твердо предложить вам чтобы взглянуть на Bootstrap (http://getbootstrap.com ), эти ребята проделали большую работу по разделению классов на несколько "подклассов".

Я надеюсь, что это поможет.

Вероятно, лучше всего иметь только один CSS-файл, но уменьшить его и сжать. Предполагая, что ваши 30 КБ до этого, вы, вероятно, уменьшите размер файла примерно до 5 КБ с помощью минификации (удаления пробелов) и сжатия.

Разделение, вероятно, ускорит вашу работу, но только при некоторых условиях.

• Вам нужно будет убедиться, что каждый раз загружается только одна таблица стилей - в противном случае вам потребуется два или более HTTP-запросов, которые требуют дополнительных затрат себя, что, по крайней мере, частично сведет на нет выигрыш от меньшего размера файла. Для этого недостаточно просто разделить таблицу стилей и вставить несколько тегов <link> с разными атрибутами мультимедиа, браузеры, похоже, загружают все таблицы стилей <link> независимо от запросов мультимедиа (спасибо @cimmanon за эту информацию, не знал этого).
• Количество правил CSS, разделяемых таблицами стилей, должно быть небольшим - в противном случае каждая из нескольких таблиц стилей должна содержать все общие правила и, таким образом, будут иметь почти такой же размер, как у оригинала.
• Вы используете препроцессор CSS (или что-то подобное), поэтому можно использовать одинаковые фрагменты кода в 5 таблицах стилей.

Также: Не оптимизируйте преждевременно. Делайте это только в том случае, если у вас проблемы с производительностью.

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

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

Это также относится к добавлению асинхронности в тег скрипта JavaScript; например.: <script src='myfile.js' async></script>.

DOM не должен ждать загрузки вашего JS-файла. Добавляйте асинхронность только в том случае, если для создания вашего DOM не требуется какой-либо из этих JavaScript при загрузке.

Я был бы склонен сказать это.

Для производства всегда храните их в одном файле; причина в том, что это более эффективно для браузера, и это должно быть вашим основным интересом (IMO) при переходе от разработки к производству.

Развитие - это совсем другое дело. Я склонен разделять медиа-запросы так, чтобы они были по любому элементу, например:

.foo { // .. some css }
.foo:hover, .foo:focus { // hover css }
@media screen and (max-width: 400px) {
    .foo { // .. some differentcss }
}

Как правило, если я меняю элемент, я не хочу, чтобы мне приходилось повсюду искать CSS (хотя вы можете использовать что-то вроде grep...).

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

Просто: используйте 1 таблицу стилей и просто добавляйте к ним комментарии, чтобы упростить поиск и изменение стилей CSS, например:

//sheet 1 (mobile device 800 px)
code

//sheet 2 (mobile device 768 px)
code

//sheet 3 (mobile device 480 px)
code

//sheet 4 (desktop size 1024 px)
code

При желании вы можете использовать несколько таблиц стилей и вызывать их для каждого конкретного размера.

Я бы предпочел взглянуть на Загрузчик . Это 1 файл CSS, который содержит все CSS. Он работает почти в 99 % браузеров и чрезвычайно отзывчив.

Нажмите на живую демонстрацию и увеличьте масштаб (Ctrl + = увеличить, Ctrl - = уменьшить, Ctrl 0 = нормально) или откройте ее на своем мобильном телефоне, чтобы посмотреть, как она отображается.