最小化CSS规则VS单个样式表文件

Question

For better reflow handling, it is said that unused CSS rules should be avoided, because the browser spends time trying to find match all these rules. But, in real life, we have websites with many pages, and popups and what not, and it's also a best-practice to use as few HTTP requests as possible, and in most cases it's best to create a single CSS file that includes everything, (and that file will be cached). So, these two performance best-practice approaches seems to collide with each other, because, by creating a single file, it will be filled with rules which aren't in use most of the time (per page), and by splitting it up to many stylesheet files and only uses the ones the page (or components) need will cause many HTTP requests to be fired and might also be difficult to manage.

So, what is best? is reducing reflow is better than less HTTP requests?

some links on the matter :
https://developers.google.com/speed/docs/best-practices/payload#RemoveUnusedCSS https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS

Answer 1

Warning: Does not answer the question (I misread)

One way to solve both your problems would be to use stylesheet extension language such as SASS or LESS . This greatly improves how you can organize your CSS since it allows multiple SASS/LESS files to compile into a single, minimized CSS file. It also provides additional features which should come in handy for anyone with complex stylesheets such as mixins, definitions and a lot more.

Unfortunately I do not have an answer to what is the best practice or a good balance if you are unable to use SASS or LESS.