0

I wanted to know which would be best practice for media queries.

If you were to target a screen size I would generally do something like:

section#about {
  background-color: yellow;
  color: black;
  padding: 5px 20px;

  @media (max-width: 600px) {
    padding: 0;
  }
}

.button-small {
  margin-bottom: 12px;

  @media (max-width: 600px) {
    margin-bottom: 6px;
  }
}

Would the following be better:

section#about {
  background-color: yellow;
  color: black;
  padding: 5px 20px;
}

@media (max-width: 600px) {
  section#about {
    padding: 0;
  }
}

.button-small {
  margin-bottom: 12px;
}

@media (max-width: 600px) {
  .button-small {
    margin-bottom: 6px;
  }
}

Instead of nesting @media queries inside classes, you would create a standalone @media query and add the class you would need changed?

NB: Sorry all, I'm using a preprocessor (SASS). I'm thinking of ways to organize code legibility.

Wasabi Developer
  • 3,523
  • 6
  • 36
  • 60
  • I was always under the impression that you don't nest media queries inside classes as a general rule. – Aaron Lavers Apr 19 '16 at 07:36
  • Your methods have a lot of duplication. Why not just declare the media query once? – LDJ Apr 19 '16 at 07:37
  • 1
    Media queries can't be nested like this in pure CSS. Only CSS preprocessors allow you to do that. The CSS preprocessor itself will take the code you've given in example 1 (invalid CSS) and convert it into something similar to example 2 (valid CSS). – James Donnelly Apr 19 '16 at 07:37
  • Actually, there's a really good SO post about it here: http://stackoverflow.com/a/11747166/5580153 – Aaron Lavers Apr 19 '16 at 07:39
  • I think second approach is good.. so that we can decrease redundancy.. – Eswara Reddy Apr 19 '16 at 07:39

2 Answers2

1

Media queries can't be nested like this in pure CSS. Only CSS preprocessors (like LESS and Stylus) allow you to do that. The CSS preprocessor itself will take the code you've given in example 1 (which is invalid CSS, but valid in a CSS preprocessor) and convert it into something similar to example 2 (valid CSS).

If you're using a CSS preprocessor then example 1 is probably the best approach if you have a long chain of nested elements, but if you're not using a CSS preprocessor then example 2 is the only one which will give you any results.

James Donnelly
  • 126,410
  • 34
  • 208
  • 218
  • I expect a lot better from someone with your reputation. If you want to ask clarification from the OP, you should have posted a comment instead. This question is clearly opinionated, you should have voted to close it. – cimmanon Apr 19 '16 at 11:01
  • 1
    @cimmanon I'm not asking for clarification from OP at all, if you read my answer. OP tagged this quesiton with CSS and CSS3, nothing else, and hasn't mentioned anything about CSS preprocessors. My answer states that in CSS (and CSS3) only example 2 would work. No clarification asked for. There's no "opinionated" here at all, as example 1 simply won't work in a pure CSS environment. – James Donnelly Apr 19 '16 at 11:03
  • 1
    @cimmanon furthermore, OP edited their question after I posted my answer ([here's the original](http://stackoverflow.com/revisions/36711551/1)) to say they were using SASS. Rather than getting all snooty with the whole "I expected a lot better...", a "OP has edited their question, so this answer isn't fully accurate any more" would have been a much friendlier response. – James Donnelly Apr 19 '16 at 11:05
  • The original revision was asking about "best practices", too. [Best practices are off-topic under "opinionated"](http://meta.stackoverflow.com/questions/265928/is-a-best-practice-question-off-topic). You should have voted to close regardless. – cimmanon Apr 19 '16 at 11:15
  • 1
    @cimmanon there's not a matter of opinions when a question has a clearly right or wrong approach. With SASS tagged, it certainly now is *primarily opinion based*, but before it was clear-cut which one to use. – James Donnelly Apr 19 '16 at 11:24
0

Using SASS I prefer the first approach tbh. Also, if I were to write that code I'd most definitely have one file for _buttons.scss and one for the _about-section.scss. Meaning both wouldn't be able to share a media query anyway. I would however recommend defining your media queries as variables you can re-use:

$bp-medium: (min-width: 600px);

And then later:

@media #{$bp-medium} {
    // Code here...
}

One reason I prefer the media query inside selector approach is because when you're nested inside SASS you still want to keep your media queries in the same area as the original styling. For example:

.button {
    background: blue;
    padding: 1rem 2rem;

    // Large Buttons
    &--large {
        padding: 1.5rem 3rem;

        @media #{$bp-medium} {
            padding: 2rem 4rem;
        }
    }
}

It would be annoying to have to "leave the scope" just so that the media query isn't inside the class.

powerbuoy
  • 12,460
  • 7
  • 48
  • 78