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
Jeremy Castanza
12,081 PointsOne vs. Two CSS files
I noticed that Nick included responsive.css as a separate file. I'm wondering if this is best practice or not. I've read different things about trying to include everything into a single css file in order to minimize the number of HTTP requests to a server. I understand why he'd separate them here as a simple learning exercise, but I'm still curious.
Is it best practice to include responsive media queries in a separate file or to simply include them in your main.css file to minimize HTTP requests in an attempt to optimize performance?
1 Answer
Tim Knight
28,888 PointsJeremy,
I really think it's a matter of preference that can offer a lot of different pros and cons to consider. A couple of the things you'd want to think about would be:
- Would putting the files together into one make them more difficult to manage?
- Are the separate files located on separate systems (are they on a CDN)? This is something to consider since your browser will only create a certain number of connections to the same server at the same time.
In the ideal world you obviously want to have as few connections and files required as possible, but if that impedes your ability to manage your code base, having a secondary file isn't that big of a deal. What I wouldn't recommend however would be adding that additional file through an @import statement because that would require one file to download completely before the other file can be requested. Obviously don't go overboard with this... one extra file is different than 10 or 20 files.
Jeremy Castanza
12,081 PointsJeremy Castanza
12,081 PointsThanks for the feedback, Tim. That's actually very helpful.
With regards to your comment about CDNs, does Treehouse have any additional resources about CDNs? I know what they are, but I've never intentionally used them for serving my own CSS. I always thought that they were just better ways of serving frameworks and libraries (i.e. Bootstrap, jQuery, etc.).
Tim Knight
28,888 PointsTim Knight
28,888 PointsFor most projects that's really going to be your common use case in that you'll use a CDN for something like an online framework or library that is supplied by someone else. If you're working on a large project however where asset distribution (scripts AND images) and download speed is extremely important you could look at using something like Amazon's S3 or checking out a specific CDN service like https://www.maxcdn.com/. There aren't any "resources" that I can think of as each CDN will have their own specific feature set and requirements. I think the important thing is, if you determine you need it to contact a few options and see how they can best meet your needs. Remember too, we're talking about shaving milliseconds off of transaction times in many cases so don't get too caught up in the details if you're just starting out and the same goes with including a second CSS file. It will most-likely always depend on the current situation.