24 replies

Nesting media queries in non-media query

I see https://developer.mozilla.org/en-US/docs/Web/API/CSSNestedDeclarations#css does this, but "CSSNestedDeclarations" is only supported by less than 50% of browsers. (https://caniuse.com/mdn-api_cssnesteddeclarations)

Is it ok to put a media query inside the declaration block of another regular selector?

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: row;
  @media (max-width: 512px) {
    flex-direction: column;
  }
  justify-content: center;
}

or do I need to seperate them?

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}

nav {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 512px) {
  nav {
    flex-direction: column;
  }
}