Как можно сократить количество правил стилей при использовании media queries?

Question

[weranda]

Приветствую

В таблице стилей повторяются правила при различных ширинах.

Пример:

@media screen and (max-width: 1200px) {body{color: red}}
@media screen and (max-width: 1100px) {body{color: blue}}
@media screen and (max-width: 1000px) {body{color: red}}
@media screen and (max-width: 900px) {body{color: blue}}
@media screen and (max-width: 800px) {body{color: red}}
и так далее.

Разумеется, повторяется не одно правило, а много правил. Файл раздувается. Существуют ли какие-нибудь техники, приемы для уменьшения количества дубликатов в таких случаях?

Answer 1

[iBird Rose]

выноси повторяющиеся в отдельные промежутки.

@media (max-width: 1200px) and (min-width: 900px) {

}

p.s. то что ты показал в примере - именно чередование - такое бывает очень редко. и там никак не сократить. а вот одинаковые стили на длинном промежутке - часто. поэтому выноси такие стили в промежутки.

Answer 2

[Сергей Горячев]

Предлагаю не парить голову лишними 5-10 строками кода CSS.
Не та проблема, которая поможет вам прям сильно оптимизировать сайт.
А ваш пример это вообще что-то сильно странное :)))

Answer 3

[Евгений]

если на Less или Sass писать, и стили на некоторых промежутках совпадают, то примеси(mixin) могут немного упростить код

Answer 4

[Алексей Сол]

Если у вас именно такие повторяющиеся промежутки, которые вы привели в примере, то может быть, имеет смысл реализовать это функцией на JS?