Поскольку существует множество способов реализации медиазапросов CSS3 на веб-сайте, я хотел бы знать, какой из них рекомендуется более опытными веб-дизайнерами. Я могу придумать пару:

1. Все в одной таблице стилей

Существует стиль по умолчанию, который применяется ко всей ширине экрана, и медиа-запросы, которые применяются только к меньшей ширине экрана и перезаписывают значения по умолчанию, все в одном файле. Например:

HTML

<link rel="stylesheet" href="main.css">

main.css

article
{
    width: 1000px;    
}

@media only screen and (max-width: 1000px)
{
    article
    {
        width: 700px;
    }

}

(пожалуйста, имейте в виду, что это всего лишь пример)

Плюсы:

• Стиль по умолчанию применяется к старым браузерам
• Требуется только один HTTP-запрос

Минусы:

• Запутывается из-за большого количества кода
• Некоторым браузерам придется загружать код, который они не будут применять

. 2. Отдельные таблицы стилей

Существуют отдельные таблицы стилей, содержащие полный код, адаптированный для каждой ширины экрана. Браузеры загружают только тот, который подходит.Например:

HTML

<link rel="stylesheet" href="large-screen.css" media="screen and (min-width: 1001px)"> /*Also older browsers*/
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1000px)">

большой -screen.css

article
{
    width: 1000px;
}

маленький -screen.css

article
{
    width: 700px;
}

Плюсы:

• Аккуратный и организованный
• Требуется только один HTTP-запрос
• Браузеры загружают только то, что им нужно

Минусы:

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

3. Отдельные таблицы стилей, одна глобальная таблица стилей

То же, что и #1, но глобальный стиль и медиа-запросы находятся в отдельных таблицах стилей. Например:

HTML

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="small-screen.css" media="only screen and (max-width: 1300px)">

main.css

article
{
    width: 1000px;
}

маленький -screen.css

article
{
    width: 700px;
}

Плюсы:

• Также аккуратно и управляемо
• Нет проблемы #2 при внесении глобальных изменений
• Глобальный стиль применяется к старым браузерам

Минусы:

• Меньшая ширина экрана -требует 2 HTTP-запросов

Это все, о чем я могу думать. Как следует управлять медиа-запросами?

Спасибо за любые ответы.