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 trialrajbee
6,657 PointsHow big can i make my css file ?
Is there a limit on how much css I can put into one file ? Are there any situations where it is better to split css into more than one giant file ?
3 Answers
Roy Penrod
19,810 PointsI don't think there's a hard limit, but there are practical limits. Two of the most important practical limits are developer sanity and performance.
One giant CSS file is a pain to maintain for developers, but it's better from a performance perspective because the browser is only sending one request for the CSS file rather than several requests for different CSS files.
A lot of developers use a CSS pre-compiler like Sass or LESS to get around this. They let you split CSS up into multiple files (often called partials) and the pre-compiler assembles them into one CSS file.
The benefit is that it's a heck of a lot easier to find what you need to edit in the smaller partial files while still getting the performance gains from loading one CSS file.
When they're ready to move the project to a production server, developers will also minify their CSS. Minifying CSS compresses the CSS by taking out all the unnecessary spaces, new lines, and and comments without actually affecting the functionality of the CSS.
The browser can read the minified CSS just fine, but it's a lot harder for humans to read because all of the formatting is removed.
Here's a CSS minifier you can use to see what it does: Dan's Tools CSS Minifier
So the current best practices are to maintain a set of multiple partial files for development, but to merge them into one CSS file and minify it for the production environment. That way you keep the developers sane(r) and still get the performance from reducing the number of browser requests.
Roy
Kevin Korte
28,149 PointsIf this is a factor for you IE 6 through IE 9 had a limit of 4,095 selectors per stylesheet. If you go over that, those versions of IE will just silently ignore the rest.
That's about all I have to add to Roy's answer.
rajbee
6,657 PointsThanks. How did you get this info ? Is there a website or documentation for things like this ?
Kevin Korte
28,149 PointsNot really, not officially. I'm sure there are many blogs that reference this. Best way to get this type of info is to get plugged in to the web world. I read a lot about this type of stuff. Follow better well known devs on Twitter. Twitter is actually a great place to track what other devs are doing and having problems with. I read a lot of blogs on web design and development, I read on Stack Overflow a lot. I just remember seeing other devs find this rule by accident, and this tidbit stuck with me. Learn by trail and error, of others preferably.
nfs
35,526 PointsHope we never exceed that limit...
Kevin Korte
28,149 PointsToday, I'm not even sure I would worry about that. That was almost 2 years ago, and the amount of users on IE6-9 is next to nothing.
But if ever was a problem for you, the simple solution is to break up your css files into multiple stylesheets.