CSS Media Queries

Improve this page

Place media queries inside their relevant rule sets. Don’t bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it harder for other people to find them in the future.

Bad Query Placement:

// Bad SCSS

.element {
  //...
}
@media (min-width: 480px) {
  .element {
    //...
  }
}

// Bad SCSS

.element {
  //...
}

.element-title {
  //...
}

@media (min-width: 480px) {
  .element {
    //...
  }
  .element-title {
    //...
  }
}

Good Query Placement:

// Good SCSS

.element {
  //...
  @media (min-width: 480px) {
    //...
  }
}

// Good SCSS

.element {
  //...
  @media (min-width: 480px) {
    //...
  }

  .element-title {
    //...
    @media (min-width: 480px) {
      //...
    }
  }

}

// Good SCSS (if nesting is unnecessary)

.element {
  //...
  @media (min-width: 480px) {
    //...
  }
}

.element-title {
  //...
  @media (min-width: 480px) {
    //...
  }
}