How big is “too big” for a single css file?
I have a css file that is hitting 4,000 lines. Does it matter nowadays? Or should I split it into 2 smaller files?
Thank you,
Ron
Splitting it into 2 smaller files, and then serving both of those files up every time, is not going to help at all. It’s still the same amount of data to transfer, it’s still the same amount of CSS for the computer to sort through, it;s just more potential confusion for you to maintian the files separately and avoid duplication and clashes.
If you can separate it out into sections, so you may have a core set of styles that go across every page and then different subsets of styles for each section of the site, that might be worth doing, because then each page only requires a small proportion of the CSS to download and process.
The question I would ask is … how have you got up to 4000 lines? Is that really as efficient as you can make it? How much of it do you actually need?
It’s a big site; but, I may be able to clean up some of the code. I understand about having different sections, but I don’t believe that I can apply that to this site.
The site loads fine.
I was just curious if splitting the file makes a difference in loading speed.
A better immediate solution may be to compress it and to put it onto a CDN.
HTH, Jochen
If you split the file then there are more server ‘handshakes’ every time the files are called. Although the difference would be negligible it is one more thing that could go wrong.
Its actually one of the key speed determinators, as browsers open only 2/6 connections in parallel. So its absolutely the wrong thing to do.
HTH, Jochen
thats what I meant, just didnt explain it right 
It’s too big if it’s larger than it needs to, and too small if not big enough. 
(As Mozart said of his music—“There are just as many notes as there need to be.”)
Yes, gzipping the CSS file is always recommended, and serving it from a CDN can help too, though I prefer to keep everything on the one host account, personally.
I dont think there is a right way or a wrong way here, without merely getting dogmatic.
4000 lines may not even be 4000 lines. Many of my style sheets are 250-350 lines… but that’s because I don’t add carriage returns after each declaration, for example. This is a personal preference… as I still read faster left to right than down and up.
I tend to lean towards fewer files… ( saves on HTTP requests). But the true concern should be efficiency. That is are your users d/ling styles they never actually use, and is it THAT big a deal.
If for some god forsaken reason, your total style sheet is 90k! you might consider breaking it up at logical sections. so a visitor doesn’t have to d/l the whole thing if he is merely using the ABOUT and FAQ sections of your site… ( whose styles my total only 15k)
if your style sheet is 20-40k or so… you may be dong more harm by breaking it up or worse breaking it up willy nilly.
Assuming all or most of the data is needed at some point by the viewer, it is far better to have 1 large file, than 100 small files.
IHMO, if you need more than 2000 lines of CSS, your layout is ridiculously inconsistent, you failed to leverage semantics and inheritance properly, and in general the entire site needs to be tossed and started over. An entire forum skin shouldn’t even break 30k of code-- and that’s one of the largest site types in terms of varying layouts you’ll find!
I’d also be more concerned about how many k of code it is, NOT how many lines.
As to breaking it into separate files as mentioned it changes little if anything – more importantly that would be more HANDSHAKES to the server, and excessive amounts of handshaking can result in pages taking MUCH longer to load, which is why I personally dislike having more than 16 separate files on a page, and would never have more than 32… Most browsers can handle 4 to 8 handshakes at once, but with the overlap and the increasing amount of ISP connection limiting, handshaking can basically add 200ms to a full second for 2/3rds the handshakes over that first eight… that’s a ballpark figure, but “real world” sites with 32 files end up with anywhere from 3 and a half seconds to 20 seconds overhead for handshaking REGARDLESS of the size of the files… Trust me, being in New Hampshire where I get 100ms ping times to Europe but 1 second PLUS ping times to anywhere south of taxachusetts, I’m well aware of the penalties of sites with too many separate files on them.
Most of the times questions like this come up, the pages in question end up being bloated thanks to DIV around things that don’t need DIV around them, non-semantic markup, throwing classes and ID’s at everything, presentational use of classes (which IMHO is just as bad as presentational markup), and a failure to grasp the point of CSS in the first place.
Though without seeing the site in question anything we tell you is a wild blind guess in the dark…