Is inheritance mandatory in media queries?

Question

css

I type with less. Began to do adaptively - media queries are not read. Moved to the end of less, still not readable. I decided just for fun to do with inheritance:

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

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

So what? Earned. Is inheritance required or am I doing something wrong?
UPD in the browser inspector are not displayed at all, even the strikethrough ones

Answer 1

In addition to cascading (and priority according to a more precise indication), the principle of sequence works.
Thus, your styles specified in media queries work, but then they are overwritten by styles that match the same elements, but are listed below.
In short, it's best to place all media queries at the end of the file, or right after the base style definitions, so the media queries are an addition that, when triggered, will override the main class.
A separate discussion of the property distribution technique, probably the simplest one, will define basic properties in css classes (sometimes + for mobile vertical screens), and then expand them in media queries for each higher screen resolution. From simple to complex.
PS but in general at your leisure I advisestudy .