Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

Development Tools Introduction to Front End Performance Optimization Combine and Minify Assets Minify Assets

rajbee
rajbee
6,657 Points

How 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
Roy Penrod
19,809 Points

I 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
Kevin Korte
28,111 Points

If 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
rajbee
6,657 Points

Thanks. How did you get this info ? Is there a website or documentation for things like this ?

Kevin Korte
Kevin Korte
28,111 Points

Not 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.

Hope we never exceed that limit...

agreed

Kevin Korte
Kevin Korte
28,111 Points

Today, 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.