Почему не работает каскад?

Question

[Capablanca]

Доброго дня!
Работаю над макетом, и делаю каскад размера шрифтов.
На блок текста у меня привязан только один класс, ответственный за изменение размеров.
Вот его SCSS:

.heading_size_xxl {
  font-size: 6.4rem;
  line-height: 7.0rem;

  @media (max-width: 992px) {
    font-size: 4.2rem;
    line-height: 5.4rem;
  }
  @media (max-width: 767px) {
    font-size: 3.6rem;
    line-height: 4.6rem;
  }
  @media (max-width: 595px) {
    font-size: 2.8rem;
    line-height: 3.4rem;
  }
}

По какой-то причине для ширины экрана меньше 595px мне приходится ставить !important, иначе вместо этого работают правила для 767px.
Почему это так? Ведь каскад правильный! И больше никакие классы не влияют на размер шрифта в этом блоке.
Может проблема в задании через rem ? (но вообще звучит дико)
Можно ли как-то иначе организовать каскад, чтобы мне не приходилось ставить important?

Comments

[Дмитрий]

Сталкивался с подобной ситуацией. Вместо максимальной ширины использовал минимальную + вложенные медиа от меньших к большему прописывал.

[Capablanca]

Благодарю, то есть вы имеете в виду, что должно быть так:

@media (min-width: 768px) and (max-width: 992px) {
    ..
  }
  @media (min-width: 767px) and (max-width: 768px) {
   ..
  }
  @media (min-width: 596px) (max-width: 767px) {
    ..
  }
  @media (min-width: 320px) (max-width: 595px) {
    ..
  }

???

Answer 1

[BigSmoke]

Да вроде нормально ваш код работает (тык), размер шрифта меняется.

Comments

[Capablanca]

Согласен с вами, в песочнице работает.

Но после заливки на сервер и открытии живого релиза в браузере - становятся нужны импортанты именно для 595px брейкпоинта....
Иногда, впринципе, даже при использовании gulp watch на этапе разработки уже видно, что нужен импортант. Хотя опять же, на примере песочницы, и вообще в теории, при данном каскаде он не нужен.
ВТФ?

[BigSmoke]

Может какой-то плагин для галпа что-то ломает?.. Попробуйте посмотреть в .css файл, который выходит из галпа. Можно его разминифицировать(unminify) для удобства и изучить.

Ну и в каком-нибудь кеше еще теоритически может быть дело. Может вы написали вот так:

@media (max-width: 767px) {
    font-size: 3.6rem;
    line-height: 4.6rem;
  }
  @media (max-width: 595px) {
    font-size: 3.6rem;
    line-height: 4.6rem;
  }

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

[Capablanca]

BigSmoke, в итоговом css файле после всех обработок Галпа - все ровно так, как я написал ( как надо, всмысле).
Именно уже в самом Developer Tools браузера значения в последнем брейкпоинте перечеркнуты. И только !important их активирует

[BigSmoke]

Capablanca, Чудес не бывает. ИМХО или где-то в кеше застряли стили, или они не применяются к этому блоку, или они перебиваются где-то ниже в итоговом css файле.

[Capablanca]

BigSmoke, Благодарю вас за внимание к моему вопросу. Сейчас выяснил все-таки, что дело в гулп-плагине css-mqpacker который группирует все повторяющиеся медиа правилы в одно, но при этом херит каскад -_-