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

Я работаю над адаптивным дизайном сайта, чтобы доставить контент для всех размеров экрана. У меня есть медиа-запросы для 5 различных «шагов», и файл CSS составляет около 30 Кб.

Было бы лучше разделить это на отдельные файлы и сделать их похожими на это:

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

или я должен держать их в одном файле CSS?

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

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

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

Согласно ответу на этот пост, браузеры будут загружать все таблицы стилей независимо от того, поэтому разделение по разрешению не экономит пропускную способность: /programming/16657159/when-using-media-queries-does-a -телефон-нагрузка без Релевента-запросы и-изображения

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

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

Если вы хотите, чтобы страница загружалась быстрее, чем лучше всего, было бы свести к минимуму количество запросов, так как накладные расходы довольно велики. Кроме того, вы можете оставить для себя версию для разработки и предоставить минимизированную 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>-tags с различными атрибутами СМИ, браузеры , кажется , чтобы загрузить все <link>ред таблицу стилей , независимо от запросов средств массовой информации (спасибо @cimmanon для этой информации, не знали , что) ,
• Количество правил CSS, совместно используемых между таблицами стилей, должно быть небольшим - в противном случае каждая из нескольких таблиц стилей должна содержать все общие правила и, таким образом, иметь размер, почти равный оригиналу.
• Вы используете CSS-препроцессор (или что-то похожее), поэтому можно иметь одинаковые фрагменты кода в 5 таблицах стилей.

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

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

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

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

DOM не должен ждать загрузки вашего файла JS. Добавляйте async только в том случае, если для построения вашей 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

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

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

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