Наследование обязательно в медиа-запросах?

Question

[vladimir_html]

Верстаю с помощью less. Начал делать адаптивно - не читаются медиа-запросы. Переместил в конец less, всё равно не читаются. Решил просто по приколу сделать с наследованием:

@media screen and (max-width: 767px) {

  body {
    .header {
      .logo {
        flex-direction: column;
        .left_part {
          width: 100%;
        } //left_part
      }// logo
    }// header
  }// body
}

И что? Заработало. Наследование обязательно или я что-то делаю не так?
UPD в инспекторе браузера не отображаются вообще, даже зачёркнутые

Comments

[Максим Софронов]

Так делать не надо. Прикрепите код и следующие за ним медиазапросы, тогда можно будет посмотреть в чем у вас проблема, а еще лучше сделайте все в песочнице https://jsfiddle.net/

[vladimir_html]

Максим Софронов: в песочнице вообще не работает https://jsfiddle.net/963guzf7/

[kulaeff]

Что вы имеете ввиду под наследованием?

[vladimir_html]

kulaeff: body - .header - .logo. Ну такая запись

[kulaeff]

Т.е. вы имеете ввиду, что запись

@media screen and (max-width: 767px) {
  .left_part {
    width: 100%;
  } //left_part
}

не работает?

[Ankhena]

vladimir_html: Потому что специфичность htmlbook.ru/samcss/kaskadirovanie
И отсюда вывод: не стоит использовать вложенность больше 2, максимум 3 уровней, когда уж совсем никак. А лучше и вовсе без нее.
Уж тем более начинать с body... вообще аут. Зачем? У вас что, есть селекторы в css не в body?

Если logo на странице больше одного, так и именуйте классы типа header-logo, partners-logo и т.д. А не сами себе яму ройте.

[vladimir_html]

kulaeff: именно

[vladimir_html]

Ankhena W: капец. "На море на океане есть остров, на том острове дуб стоит и разные зверушки водятся, под дубом сундук зарыт и черви, в сундуке — заяц, золота бесчисленное множество, в зайце — утка и морковка, переваренная еда, в утке — яйцо, тоже переваренная еда, в яйце — игла, ещё не родившийся цыплёнок, а в игле — смерть Кощея"
вот у меня именно так. Мне чё, весь less переписывать?

[Ankhena]

vladimir_html:

Мне чё, весь less переписывать?

Ага. А то Кащей никогда не сдохнет.
Зато больше никогда не станете так писать.
Почему-то многие, когда начинают работать с препроцессорами начинают городить вот такие очень странные штуки. Хотя вроде при первом же использовании должно заиграть любопытство "а как оно в CSS-то выглядит?", увидев что там в итоге получилось ужаснуться и делать по нормальному.

А еще посмотрите БЭМ, можно не пользоваться, можно свою методологию на его основе сделать, но в голове точно прояснится.
И вот эта чудесная статья, всем ее рекомендую: https://csswizardry.com/2012/11/code-smells-in-css/

[vladimir_html]

Ankhena W: Ужас. Хорошо, что одностраничник пишу

Answer 1

[Александр Талалаев]

Помимо каскадирования(и приоритета по более точному указанию), работает принцип последовательности.
Таким образом ваши стили указанные в media queries срабатывают, но затем перетираются стилями которые подходят этим же элементам, но указаны ниже.
Короче говоря, лучше всего все media запросы располагать в конце файла либо несоредственно после определения базовых стилей, таким образом медиа запросы будут дополнением, которое при срабатывании переопределит основной класс.
Отдельный разговор методики распределения свойств, наверное самые простой будет определять в css классах базовые свойства(иногда + для мобильных вертикальных экранов), а далее в медиа запросах расширять их для каждого более высокого разрешения экрана. От простого к сложному.
PS а вообще на досуге советую изучить.

Comments

[vladimir_html]

Переместил в конец less, всё равно не читаются

[Александр Талалаев]

vladimir_html: все работает.
Может вы забыли про приоритет указания точности.
Если вы выше(или не важно где), указали класс как:

.parent  .child {

}

Он будет главнее чем

.child {

}

Где бы тот не находился. Это касается любых дополнительных каскадов или дополнительных классов/айдишников.
Вам поэтому выше посоветовали не плодить множество каскадов, там где это не нужно. Каскады нужны только для уточнения стилей, а так старайтесь писать более простые общие классы, хорошо бы перейти на модель которую предлагает методология БЭМ