IE8 CSS file 4096 rule limit

Recently I asked front-end developers to try to merge small CSS files into one, and then use CSS compressor or optimizer to minify CSS file size. There are many tools there to improve CSS quality (csslint, validators), or minify CSS (YUI compressor, cssmin, and many online tools). In my mind, we should not have more than 3 CSS files per module (one common, one project global, one module specific). This rule not only benefits web performance, but also modularizes CSS cascading coding.

However, one web developer rejects this request and says IE cannot take CSS files with 5000 rules. I don't know this, so test it using IE8, FF8 and Chrome15, and the result reveals that Internet explorer 8 does not take the 4096 rule from one CSS file.

This blog (CSS size limit in Internet Explorer 8) also explains the similar problem and includes more IE related CSS limit. However, please note 4096 is not file size, but rule numbers. About the file size, the blog also mentioned IE6/IE7: Limit for CSS file size around 285KB (depends on specific stylesheet)


CSS best practices

1. Write succinct CSS - don't forget CSS stands for Cascading Style Sheets, so avoid redundancy in your CSS. Use shorthands, use cascading codes
2. Write correct CSS - don't forget validate your CSS using validators, csslint
3. CSS compressor/optimizer - for performance using tools
• CSS Drive
• CSS Compressor
• CSS Optimizer
• Clean CSS
• Pingates
• PHP Insider
• SevenForty
• Arantius
• Lottery Post
• Page Column
4. Gzip CSS - save more than 70% size