Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
mrx3
8,742 PointsShould I do all my styling with just @media screen, or keep using CSS?
I'm getting towards the end of my @media screen section with Nick. I'm wondering should I still continue to style with CSS, or do I just use the @media query? How are sites styled in the real world? It seems to that it would be simpler to just style with the @media query, and have all the styling done with that. Thanks in advance for any help.
2 Answers
Kevin Korte
28,148 PointsMedia queries are an aspect of CSS.
You're asking should you eat lemons, or lemon meringue pie. Lemons are in lemon meringue pie, just like media queries are in CSS. Now with that said, I agree with Colby. You may end up with a bunch of duplicate CSS rules. If you set a text color in a media query, it's not going to work at a different media query. So if you wanted text to be red, you would have to set that text color in every single media query, and not only does this go against the DRY (don't repeat yourself) principal, but it also because a nightmare to maintain.
I'd set as many CSS rules as you can outside of any media query. Which would basically be everything. I'd essentially build the site without media queries. I would than use media queries to override the CSS rules necessary to make the elements adapt to the screen size. Should be a lot easier.
As you get further along, this is where preprosser tools like Sylus, Sass, or Less really come in handy.
Colby Work
3,653 Pointswell, technically, using media queries is still using CSS, it's just that a media query will dictate when that rule is to be applied.
mobile first, which is the most commonly accepted best practice, is to write your CSS in a way that styles for the smallest, simplest devices/resolutions, and then progresses with media queries as the screen gets larger.
the method you are describing, sounds a lot like Adaptive design, which there isn't necessarily anything wrong with it, but you will end up with a lot of duplicate code since there will most likely be a lot of things that stay the same even as the size of the device changes.
hope that helps.
mrx3
8,742 PointsThanks for the help Colby. Much appreciated. I do have a question about your comment. When you say, "You will end up with a lot of duplicate code since there will most likely be a lot of things that stay the same even as the size of the device changes." Are you referring between the CSS and the @media queries? Thanks again for the help.
mrx3
8,742 Pointsmrx3
8,742 PointsNice, Thanks Kev! That's what I was thinking as well. Build the site with CSS, and then use media queries to override the css as necessary. Thanks again man.