Media queries and nesting

good-vs-bad.scss

// BAD - lots of selector repetition and if we don't match the nesting/specificity in the media query, the rules we write may not override the defaults

.my-module {
  height: 4em;
  .my-module-header {
    width: 100%;
    .my-module-title {
      font-size: 1em;
    }
  }
  @include larger-than(mobile) {
    height: 2em;
    .my-module-header {
      width: 50%;
    }
    .my-module-title {
      font-size: 2em;
    }
  }
}

// GOOD - no repetition of selectors, no chance of media queries not overriding defaults, only have to think about nesting once

.my-module {
  height: 4em;
  @include larger-than(mobile) {
    height: 2em;
  }
  .my-module-header {
    width: 100%;
    @include larger-than(mobile) {
      width: 50%;
    }
    .my-module-title {
      font-size: 1em;
      @include larger-than(mobile) {
        font-size: 2em;
      }
    }
  }
}