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
Should 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.
Kevin Korte28,148 Points
Media 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.
well, 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.