Organizing media queries in CSS with Sass and BEM

README.md

Assumptions:

1. Using Sass with & ampersand selector, limited nesting, and modular / partials-based file organization
2. Using BEM convention with limited nesting

Two lines of thought here:

1. Organize media queries to be "inline" i.e. colocated with the selectors.

• pro: close to the code, context is clear
• con: potentially lots of media query declarations scattered throughout the CSS file

2. All media queries for a component grouped together at the end of the file.

• pro: ... pretty much self-described: all the media queries are found in one spot
• con: contextually not as clear which elements have media query adjustments

mq-colocated-inline.scss

// credibility stat
// ----------------
.credibility-stat {
  position: relative;
  padding: 16px 0 0;

  @include breakpoint(medium up) {
    padding-top: 50px;
  }

  // spacing based on adjacent siblings
  .credibility-quote ~ &,
  &~& {
    margin-top: 16px;

    @include breakpoint(medium up) {
      margin-top: 50px;
    }
  }

  &::before {
    position: absolute;
    top: 0;
    content: '';
    border-top: 1px solid $black400;
    margin-left: 8.3333%;
    width: 75%;
  }

  &__data {
    color: $black1000;
    font-size: 36px;
    font-weight: bold;
    line-height: 48px;

    @include breakpoint(medium up) {
      font-size: 72px;
      font-weight: normal;
      line-height: 70px;
    }
  }

  &__cta {
    margin-top: 16px;

    @include breakpoint(medium up) {
      margin-top: 64px;
    }
  }
}

mq-grouped.scss

// credibility stat
// ----------------
.credibility-stat {
  position: relative;
  padding: 16px 0 0;

  // spacing based on adjacent siblings
  .credibility-quote ~ &,
  &~& {
    margin-top: 16px;
  }

  &::before {
    position: absolute;
    top: 0;
    content: '';
    border-top: 1px solid $black400;
    margin-left: 8.3333%;
    width: 75%;
  }

  &__data {
    color: $black1000;
    font-size: 36px;
    font-weight: bold;
    line-height: 48px;
  }

  &__cta {
    margin-top: 16px;
  }

  @include breakpoint(medium up) {
    padding-top: 50px;

    .credibility-quote ~ &,
    &~& {
      margin-top: 50px;
    }

    &__data {
      font-size: 72px;
      font-weight: normal;
      line-height: 70px;
    }

    &__cta {
      margin-top: 64px;
    }
  }
}