Где разместить медиа-запросы CSS3?

Question

У меня есть философские дебаты с самим собой в лучшем месте, чтобы помещать медиа-запросы в таблицы стилей. Я пытаюсь структурировать свой CSS модульно (например, OOCSS или SMACSS и т. Д.). Учитывая этот контекст, я вижу два варианта:

1. Поместите все медиа-запросы вместе в отдельную таблицу стилей или раздел основной таблицы стилей.
2. Поместите медийные запросы под их базовыми аналогами. Например, если у меня есть модуль под названием «новостной элемент», я могу поместить любые необходимые типы медиа-запросов прямо под определением этого модуля.

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

Любые мысли по этому поводу?

Answer 1

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

как:

@import url(mydevice.css) this and (that); 

или:

<link rel="stylesheet" media="only this and (that)" href="mydevice.css" /> 

... если вы смотрите на устройства конкретных корректировок как своего рода «подтемы» основного макета (просто переписывая некоторые свойства), это тоже имело бы смысл для меня.

Answer 2

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

В конце концов вы напишите немного больше кода, переименовывая запросы, но не сильно.

Answer 3

Подход №2 работает лучше для меня.

Когда я был новичком, я использовал Подход № 1 - Я писал свои медиа-запросы вместе (внизу моей таблицы стилей или в другом файле).

.header { ... } 
.news-item { ... } 
.footer { ... } 

/** 
* ... 
* 
* bla bla, imagine a huge amount of styles here 
* 
* ... 
*/ 

/** All style tweaks for screens < 1024px */ 
@media screen and (max-width: 1024px) { 
    .header { ... } 
    .news-item { ... } 
} 

Этот подход имеет несколько недостатков. Основываясь на моем опыте, наиболее примечательным является то, что ремонтопригодность - это жесткий. Основная причина: логика .news-item распространяется на несколько несвязанных линий CSS.

Позже, естественно, я решил сохранить связанные стили вместе. Подход № 2:

/** Header's styles and media queries */ 
.header { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .header { ... } 
} 
@media screen and (max-width: 720px) { 
    .header { ... } 
} 

/** News-item's styles and media queries */ 
.news-item { 
    ... 
} 
@media screen and (max-width: 1024px) { 
    .news-item { ... } 
} 
@media screen and (max-width: 720px) { 
    .news-item { ... } 
} 

/** ... and so on */ 

Однако, при таком подходе, повторяя медиазапросы max-width значения все вокруг не выглядит достаточно ремонтопригодны. Я решил эту проблему, используя предварительный процессор CSS (например, SASS), который позволяет мне заменить все их на переменные и определить их один раз.

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

Если вы заинтересованы в более подробной информации, пожалуйста, read on my blog post :-)

Answer 4

Может быть, вы можете попробовать css variables, который является нативная поддержка повторно использовать CSS!

:root { 
 
    --main-color: #F06D06; 
 
} 
 

 
.main-header { 
 
    color: var(--main-color); 
 
} 
 
.main-footer { 
 
    background-color: var(--main-color); 
 
}

https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

https://developers.google.com/web/updates/2016/02/css-variables-why-should-you-care

https://css-tricks.com/difference-between-types-of-css-variables/