@media min-width и max-width вместе на одном брейкпоинте?

Question

[r_g_b_a]

Здравствуйте.
Интересует вопрос, нормально ли использовать в медиа-запросах min-width и max-width вместе к одному и тому же брейкпоинту?
Приведу пример - фон блока на телефоне красный, а на планшете черный.
Как это обычно делают при mobile first:

div {font-size:14px; background-color: #f00}
@media (min-width: 768px) {
div {background-color: #000} /*переопределяем фон*/
}

В тех гайдах, что я читал про mobile first говориться, что сначала нужно писать стили по умолчанию, а в медиазапросах по необходимости их переопределять. Но что, если сделать так:

div {font-size:14px}
@media (max-width: 767.98px) {
div {background-color: #f00}
}
@media (min-width: 768px) {
div {background-color: #000}
}

Код в инспекторе становиться намного чище на реальном сайте. Особенно полезный такой подход в ситуации, когда мы добавляем какой-нибудь класс с помощью js, который должен работать при определенной ширине дисплея.
К примеру, делаем мобильное сабменю открытым при клике. Но такое состояние не желательно, если мы повернули устройство и экран стал отображать десктопный вид, так как тут должен срабатывать :hover, а сабменю уже в открытом состоянии из-за класса. И тут приходиться либо отслеживать ширину экрана с помощью js и снимать класс, либо перебивать мобильные настройки через !important
Почему такой подход не используется, или я плохо искал?

Comments

[Ankhena]

либо перебивать мобильные настройки через !important

Достаточно прочитать про вес селекторов и не делать лишней вложенности, тогда не будет импотантов.

Да и проверять ресайз на js это нормально.

Почему такой подход не используется, или я плохо искал?

Не используется, потому что обычно кроме цвета у элемента еще пачка свойств, которые не нужно переопределять. И при таком подходе их придется писать 2 раза.

Т.е. есть места, где он может быть целесообразен, но чаще нет.

[WapSter]

И в чем смысл подобной записи

div {font-size:14px}
@media (max-width: 767.98px) {
  div {background-color: #f00}
}
@media (min-width: 768px) {
  div {background-color: #000}
}

Один фиг у тебя до ширины в 768пх бдует цвет фона #f00. Равносильно записи

div {font-size:14px; background-color: #f00;}
@media (min-width: 768px) {
  div {background-color: #000}
}

Особенно полезный такой подход в ситуации, когда мы добавляем какой-нибудь класс с помощью js

это очень вредный подход. Когда открываешь js и в нем прописаны условия сразу видно, что делает скрипт. А так ты его открываешь и думаешь, что пошло не так, лезешь в тулзы смотришь, класс есть но стили перебиты, идешь в css. Довольно геморно не так ли?

Answer 1

[Seanyr]

Такое используется, когда это целесообразно.
С той же целью еще можно min и max использовать в одном запросе, например:

@media (min-width: 768px) and (max-width: 1023px) {...}

Но пихать все перезаписываемые свойства под медиа-запросы я считаю не очень хорошей практикой по нескольким причинам:
- это усложняет структуру кода, и ухудшает читаемость
- хоть в инспекторе и отображается меньше свойств , но сам css файл растет, а на скорость загрузки влияет именно он
- так же свойства по-умолчанию прописываются для максимальной совместимости, хотя это скорее всего уже неактуально
Это сугубо моё мнение, интересно было бы послушать другие.
п.с. А вот с использованием дробных значений в брэйкпойнтах я на сталкивался

Comments

[r_g_b_a]

- хоть в инспекторе и отображается меньше свойств , но сам css файл растет, а на скорость загрузки влияет именно он

незначительно, так как они либо перезаписываются, либо выносятся в max-width при верстке mobile first. Увеличивается только количество медиа-запросов вдвое. Трудно сказать, насколько это влияет на производительность

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

с текущей поддержкой в 99% можно сказать, что неактуально

п.с. А вот с использованием дробных значений в брэйкпойнтах я на сталкивался

скопировал с бутстрапа, так что вероятно с такой записью проблем быть не должно