Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

mrx3
mrx3
8,742 Points

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.

2 Answers

Kevin Korte
Kevin Korte
28,109 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.

mrx3
mrx3
8,742 Points

Nice, 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.

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.

mrx3
mrx3
8,742 Points

Thanks 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.