Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Group media queries on component level, not on query level

Group media queries on component level

The common way to use media queries is to group all styling for a specific query. Leenull, a colleague of mine, came with the idea to use media queries on a component level. This might make make complex stylesheets easier to maintain.

I wonder what you think of it. Please let me know in the comments. Here's a link to a working example.

Grouping on a component level looks like this

.item1 {
    background: red;
}
@media (max-width:480px){
.item1 {
    background: green;
}
}

.item2 {
    background: blue;
}
@media (max-width:480px){
.item2 {
    background: yellow;
}
}

.item3 {
    background: purple;
}
@media (max-width:480px){
.item3 {
    background: papayawhip;
}
}

The classic way looks like this

.item1 {
    background: red;
}
.item2 {
    background: blue;
}
.item3 {
    background: purple;
}
@media (max-width:480px){
.item1 {
    background: green;
}
.item2 {
    background: yellow;
}
.item3 {
    background: papayawhip;
}
}
@flurin

This comment has been minimized.

Copy link

flurin commented Oct 12, 2011

There are some drawbacks to the proposed "grouped" way:

  • Lot's of duplicate @media declarations
  • Harder to read IMHO
  • Can the browser parse a lot of @media declarations effectively?
@decthomas

This comment has been minimized.

Copy link

decthomas commented Oct 12, 2011

Among colleagues we have different opinions on this. It's nice to see what happens when a viewport is smaller than 480px (when all styles are grouped) but it can also be useful to see what happens to every element separately through a media query. We used your first example for our Fork-website (www.fork-cms.com) which was a good testcase for this discussion.
Curious to see what others think about the matter.
Personally, I would use your second example because it's easier to keep your code up to date and I like seeing what happens to the whole picture when inside a media query.

@stijnj

This comment has been minimized.

Copy link

stijnj commented Oct 12, 2011

I prefer the classic way. The new proposal doesn't read that wel (as @flurin already mentioned).
Did you test if there's is a difference in performance?

@davidhund

This comment has been minimized.

Copy link

davidhund commented Oct 12, 2011

I don't think this will make stylesheets easier to maintain.
There's a lot of code duplication and you change the maintenance issues from components to media queries: instead of difficulty in finding a specific compontent (search for ".item1 {") this makes it (just as) difficult to find the specific media query (search for "(max-width:480px)").

@lekkerduidelijk

This comment has been minimized.

Copy link

lekkerduidelijk commented Oct 12, 2011

I prefer the classic method as well:

  • Maintenance when using 'mobile-first' is not really optimal
  • Not very DRY
@roytomeij

This comment has been minimized.

Copy link

roytomeij commented Oct 12, 2011

Here I am promoting my usual pet peeve, but: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#media

Basically what you do here, but nested (clear indication of relationship) and compiled to one single query. I know it's by far not the two cents you're looking for, but I think it illustrates how you have a fine idea which just can't be executed in plain CSS :-)

@vasilisvg

This comment has been minimized.

Copy link
Owner Author

vasilisvg commented Oct 12, 2011

@stijnj I asked Peter Beverloo on IRC if this would be a performance issue. He said that there is a performance cost but that it's too small to worry about.
@davidhund Isn't this the same discussion we used to have about conditional IE stylesheets vs. IE hacks?

@davidhund

This comment has been minimized.

Copy link

davidhund commented Oct 12, 2011

@vasilisvg exactly: except in this case I disagree ;)

@vasilisvg

This comment has been minimized.

Copy link
Owner Author

vasilisvg commented Oct 12, 2011

@lekkerduidelijk I'm not sure why maintenance would be a problem with a mobile-first approach. Can you explain me what the difference is?

@roytomeij Interesting to see that this solution is seen as a best practice by the professionals!

@roytomeij

This comment has been minimized.

Copy link

roytomeij commented Oct 12, 2011

@vasilisvg Aren't you a professional alike? I'm not putting myself above anyone else, so no need to call me a professional when I know we all are :-) I'm not telling you what a best practice is or what others in some circles have agreed on. It was a mere illustration that some things are shitty with CSS and will remain so until the syntax evolves, however you group them.

@vasilisvg

This comment has been minimized.

Copy link
Owner Author

vasilisvg commented Oct 12, 2011

@roytomeij I consider the people who make Sass to be people who have thought really well about these issues. That's all I meant.

@roytomeij

This comment has been minimized.

Copy link

roytomeij commented Oct 12, 2011

@vasilisvg Sorry, apparently I figured you meant something else than you did. Bad day I guess. Sorry again, highly value your insights.

@vasilisvg

This comment has been minimized.

Copy link
Owner Author

vasilisvg commented Oct 12, 2011

@roytomeij No problem! (-:

@lekkerduidelijk

This comment has been minimized.

Copy link

lekkerduidelijk commented Oct 12, 2011

@vasilisvg When building a stylesheet when you use the mobile first approach, all the mobile styles normally go on top. The other versioned websites are nicely grouped on the bottom. When they are scattered through the entire file it is harder to maintain it when stuff gets updated imo...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.