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

General Discussion

Posted by Craig Watson
Craig Watson
27,930 Points

Separate CSS file for @media ??

Hi everyone,

On a larger site would be it be best practice and easier for editing to use multiple CSS files i.e a "main.css" , "responsive.css" etc.

If so will this slow down the load speed by a considerable amount ? Is there a maximum you would recommend ?

Thanks for any advice !

Craig

3 Answers

Willian Welbert
Willian Welbert
25,913 Points
Willian Welbert
Willian Welbert
25,913 Points

Hey Craig! Well I work in an university here in Brazil and we use separate CSS files for many things including media queries. There is always a new feature or content that just won't look good in smaller sizes.

Having it all separated helps us to change and adapt easier and faster. We do worry about loading speeds, but in our case is a sacrifice that it's worth it, since the site is always changing one way or another.

Craig Watson
Craig Watson
27,930 Points

Hi Willian,

Thanks for your reply, that is exactly how I see this site I am working on panning out. There will be times when certain aspects of the site are just not needed on mobile and vice versa so id like to keep them separate.

Thanks again Willian! Craig

Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points
Cosmin Cioaclă
Cosmin Cioaclă
21,339 Points

Hi Craig,

Sometimes, having multiple css or js files helps organize the front-end better. However, if you start worrying about the loading speed of your website, you can look into tools that can help with that.

For example, using Gulp or Grunt, you can have however many stylesheets you want for development and transition that into production with just one. This video explains the workflow, which you can adapt to your needs.

Hope that helps,

Cosmin

jasonjones5
PLUS
jasonjones5
Courses Plus Student 5,571 Points
jasonjones5
jasonjones5
Courses Plus Student 5,571 Points

I've been doing various Treehouse stuff and monitoring the response on Dev tools in Chrome on a live server. Bottom line it seems to be a trade off between code maintenance and absolute performance. For example, some page performance tools advise in-lining some of the CSS to improve performance, but that wouldn't actually remove the files in this case so the benefit would be marginal. I can't put them anywhere else on the page like you might with scripts so there's no benefit there.

I'd also be wary of in-lining CSS anyway due to separation of structure/style, but that's a personal thing and if there's enough of it it might be worth thinking about to squeeze out that marginal gain. I agree with the above comments, the best performance boost seems to some from combining the files and having the resulting file minified but maintaining that copy is virtually impossible, work from the source and just redo the process if changes are needed.