What is the correct way to write styles in less for all pages and separately for a specific page?

Question

css

The bottom line: for example, there is a search block, which is styled the same on all pages of the site, and on the main page there are 3-4 differences. But in general, there are quite a lot of styles for him, depending also on media queries.
So, the differences for the main are small, and I can describe everything quite easily by adding a class specific to this main. But this class is higher, i.e. it turns out that at first I describe all the nested elements, and then, having added a class that is higher in the hierarchy, I have to describe all the nested elements again with this class.
Code example with only the beginning of the hierarchy.
to get the css of the view

@media only screen and (max-width: 767px) { 
  header.page-header {
    margin-bottom: 65px; /* for all pages */
  }
  .cms-index-index header.page-header {
    margin-bottom: 0; /* for homepage*/
  }
}

I write

@media only screen and (max-width: 767px) { 
  header {
    &.page-header {
      margin-bottom: 65px; /* margin-bottom für alle Seiten */
    }
  }
  .cms-index-index {
    header {
      &.page-header {
        margin-bottom: 0; /* margin-bottom für die Startseite */
      }
    }
  }
}

further in the page-header class there are 6 or 7 more branched attachments, and in the very depth there are specific differences for cms-index-index.
So I thought, should I continue to write these 2 branches, or is there some way to shorten the code?

Answer 1

I didn’t understand anything, but okay) I think you had this - you can make yourself a mixin using the example of a button, such as this option just interrupt the styles at the bottom, another option can be done instead of values ​​like font-size: 18px; make the variable pass $size = 200px; font-size: $size; but I usually interrupt, variables are rarely rationally used

@mixin btn {
    position: relative;
    margin: 60px 0 0;
    padding: 18px 35px;
    @include btn-gradient;
    font-size: 13px;
}

header {
.btn {
  @Include btn;
}
}
footer {
.btn {
  @Include btn;
margin: 120px 0 0;
 font-size: 13px;
}
}