How much CSS is too much CSS?

Question

I'm currently developing a professional website and I have reached around 750 lines of CSS for around 4 pages, the bulk going into the homepage. I have curly braces in separate lines. I could probably reduce it a bit by going through it again.

But I was just wondering, what would you consider as being too much css?

Regards,

Answer 1

A gotcha on this (not directly related to the OP, but for others who might come here) ...

IE9 and below only recognizes the first 4096 selectors in a CSS file. Everything after that is merely silently ignored.

Answer 2

Assuming your home page doesn't have tens of nested components that have different roles/looks, you're probably being a bit non-clever with your CSS. There are two things to worry about here:

• Bandwidth: If your CSS file's size is more than 50KBs or so, some of your clients with low connection speeds/bandwidth might experience some notable lag.

• Rendering: It's possible that your CSS file is complex enough to force the client's layout/rendering engine to make some extra effort while rendering.

Both the issues would reduce your website time-efficiency. What to do?

The simplest example on how to optimize your CSS file is to collect rules that you use for many elements in one class. There are many other tips to help reduce the size of your CSS file; the other answers already link you to some articles with helpful tips, but if you want to give programs that automate the process a try, take a look at CSS Tidy (and an online tool based on CSS Tidy).

I hope that helped!

Answer 3

I think there isn't a limit at all. Just write the code you need, and when you've finished try to optimize it.