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
Steve Brennan
3,070 PointsSingle vs Multiple CSS files
Hi Everyone,
Just finished my first training session on grids. I'm curious, I was always told that webpages should only have one CSS file linked to save server processing, but in my current lessons multiple CSS files are used.
I'm curious, under what situations should I use multiple CSS files, and what situations should I use single CSS files? Does it really make a difference to loading times?
Regards,
Steve
5 Answers
Keith Wolf
1,191 Points@Tanja Giles
That's a great point. It's always important to be able to find your way around your code. If network performance would still be best served with a single file, you could write a simple PHP script which includes all of those CSS files, and using the proper headers, outputs it as text/css and tells the browser to cache it like any other CSS file. You could even minify the CSS on its way out.
This technique has worked well for me.
James Barnett
39,199 PointsIt can make a difference, which is why for large sites, CSS files are minified and then combined into a single CSS file.
Ricardo Diaz
30,415 PointsFrom my experience you can get away with having more then one if the sizes are small. But I wouldn't go crazy with it and probably no more then two or three. For example you would want one for general styles, then one for that pages styles, then one for IE
Keith Wolf
1,191 PointsIf your site has several different major sections, each using very different css, you can split those up in different files. That way the users that only visit section A will not have to download all the css data for section B (if they won't visit that part of the site). Then you can have a global file that every page calls to for any common stuff.
If your site is smaller or most pages use the same general css, just use one file. It saves on the bandwidth and time it takes for the request/response for each file.
Just think logically about how your site is visited and coded. If in doubt, use one file.
Tanja Giles
5,131 PointsI find that when using a CMS that comes with one large (3000+ lines) css file, it is easier to break the CSS up into a few main sheets, such as nav.css (containing all the navigation styles), styles.css (default styling and custom styling), gallery.css, etc. Basically, grouping any large block of related styles helps me find things easier. Hope this helps.