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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

John MacFadyen
John MacFadyen
7,249 Points

What is the need for the responsive CSS?

Why couldn’t i just do all the breakpoints in the main.css file?

3 Answers

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

You could put everything in one stylesheet, So you CAN just use one stylesheet, though there are reasons why you might want or need to use multiple stylesheets.

For example, in addition to your main.css you might want to use a stylesheet hosted at a Content Delivery Network (CDN). Another reason might be organization but then a well commented main stylesheet should be easy to read, even if long.

It also occurs to me that when you're learning, as we are here at Treehouse, it might be easier to understand the concepts if there are multiple CSS files rather than one large one. Large documents can be a bit overwhelming.

I'm almost done with the CSS Basics course and I'm looking forward to the responsive course so I can see for myself.

Neil

Having different style sheets is more about organization and readability. If you have a ton of CSS it just makes sense to break it down into different style sheets. If not, there really isn't much need for it. It is always good practice to start with basic mobile layout then use breakpoints to shape the site at different width sizes. this way the desktop version will not be loaded when you view on a mobile device.

if you want to learn more about responsive design I recommend reading Brad Frost's blog:

Brad Frost

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

Jacob, why does it make sense to break it into multiple style sheets if you have a ton of CSS? I'm not disagreeing, I'm just wondering why this would be superior to one well-commented sheet?

Neil Anuskiewicz It really depends of the size/scope of the site. sometimes it's easier to breakdown the CSS into different pages. Generally you will always use two style sheets, your main CSS and a normalize or reset style sheet. I would say that most sites that people are making who are learning on Treehouse really only need one, or maybe two style sheets, but If you are writing 2K lines of CSS, I think sometimes it's best to break things down and then, concatenate the sheets when you deploy the site. For me it's about organization. Here is a great blog post from CSS Tricks, I think they explain it much better than I, Also if you're using SASS some people like to keep their Mixins and color, and functions in a separate style sheet. Honestly it's a nightmare to look though a thousand lines of code searching for stuff.

CSS Tricks

So what I'm saying in short is use multiple style sheets when developing, It will make things easier to manage and know where things are, then when you deploy your site, concatenate the pages to one site that way the caching of the CSS is done for the entire site when you view the site the first time.

I hope this helps, if you have any questions please ask.

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

You can read more about responsive design here - http://learn.shayhowe.com/advanced-html-css/responsive-web-design/.

You can write your CSS either all in one file or in separate file, whatever you like.

Neil Anuskiewicz
Neil Anuskiewicz
11,007 Points

Is there a "best" practice in this regard?

Sergey Podgornyy
Sergey Podgornyy
20,660 Points

The best practice is to write clean code. I think Jacob Mishkin explained very good this issue.