Bad practise with media Queries

I write Sass media queries directly where they are needed in the file. I do not output one big media query at the bottom of the page. One of the biggest problems with doing that is your are playing around with specificity, since values at the bottom of the CSS doc holds more weight than anything above it. This can cause frustrating issues.

The browser really doesn't care, that I'm aware of if you have many small media queries or one big on. There might be miliseconds of performance advantages to have one big media query at the bottom. But at the end of the day, does using Sass to output small media queries throughout the CSS file make it more difficult to read? Yeah, possibly. But if you're using Sass, what scenario would you want to read the vanilla CSS file? Plus I minimize the CSS so it's not even readable anyway.

If I enter:

h1 {
    @media (max-width: 480px) {
        background: red;
    }

p {
    @media (max-width: 480px) {
        background: red;
    }

When it's compiled the css will be:

@media (max-width: 480px) {
    h1 {
        background: red;
    }

@media (max-width: 480px) {
    p {
        background: red;
    }

Rather than:

@media (max-width: 480px) {
    h1, p {
        background: red;
    }

Which is almost half the size!

This does seem to produce a large amount of useless code, so you should try and avoid stacking up like this if you have more than 3 occasions, however if you apply some logic you should be able to note what you are applying the same effect to and group these in a separate media query. The great thing is this won't cause any issue to your Sass writing, just pop a media query in as normal!