Чи слід розділити великий файл медіа-запитів 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 -phone-load-non-relevent-queries-and-images

Це трохи залежить від того, чого ви хочете досягти: чи намагаєтесь ви швидше завантажувати свою сторінку, чи намагаєтесь полегшити розвиток?

Якщо ви орієнтуєтесь на останнє, ви можете використовувати декілька аркушів, але це все питання переваги. Мені найпростіше використовувати один великий файл, оскільки це дає вам огляд усіх стилів, які ви заявили.

Якщо ви хочете швидше завантажувати сторінку, ніж найкраща ставка - мінімізувати кількість запитів, оскільки накладні витрати на запит досить великі. Далі ви можете зберегти версію розробки для себе і подати мінімізований 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-файл, але мінімізувати та gzip. Якщо припустити, що ваші 30 кб є перед цим, ви, ймовірно, отримаєте розмір файлу приблизно до 5 КБ з мінімізацією (видалення пробілу) та gzipping.

Розщеплення, ймовірно, отримає вам більше прискорення, але лише за деяких умов.

• Потрібно переконатися, що кожен раз завантажується лише одна таблиця стилів - інакше вам знадобляться два або більше HTTP-запитів, які мають самі накладні витрати, що хоча б частково заперечує посилення від меншого розміру файлу. Щоб зробити це, НЕ достатньо просто розділити таблицю стилів і вставити кілька <link>-tags з різними атрибутами ЗМІ, браузери , здається , щоб завантажити всі <link>ред таблицю стилів , незалежно від запитів засобів масової інформації (спасибі @cimmanon для цієї інформації, не знали , що) .
• Кількість правил CSS, що ділиться між таблицями стилів, повинна бути невеликою - інакше кожна з декількох таблиць стилів повинна містити всі загальні правила і, таким чином, матиме майже розмір оригіналу.
• Ви використовуєте препроцесор CSS (або щось подібне), тому керувати наявністю однакових фрагментів коду у 5 таблицях стилів.

Також: Не оптимізуйте передчасно. Робіть це лише в тому випадку, якщо у вас є проблеми з продуктивністю.

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

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

Це також стосується додавання асинхронізу до тегу сценарію JavaScript; напр <script src='myfile.js' async></script>.:

DOM не повинен чекати завантаження вашого файлу JS. Додайте асинхронізацію лише в тому випадку, якщо для створення вашої DOM не потрібен жоден JavaScript.

Я був би схильний сказати це.

Для виробництва завжди зберігайте їх в одному файлі; Причина полягає в тому, що він є більш ефективним для браузера, і це повинно бути вашим основним інтересом (ІМО) при переході від розробки до виробництва.

Розробка - це інший чайник риби. Я схильний розділяти медіа-запити так, щоб вони були за будь-яким елементом, наприклад:

.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= нормальне) або відкрийте його на своєму мобільному, щоб побачити, як він відображається.