You COULD split them up, but then you have to worry about the fact that it's more separate file requests.
Every time a new file is requested from the server, it takes 100ms to 3 seconds depending on the connection and network congestion -- the real world average most agree on is 200ms... A browser typically requests 8 (FF, IE) to 16 (Opera) files simultaneously, but for each file past that limit there's little overlap meaning quite often that "ping time * 2" gets added to the page load time. First load (every time someone visits cache emptY) this can add up to minutes of page load time regardless of how fast the connection bandwidth is. A loose guesstimate of the penalty I use is:
(number of files - 12) * 0.15 seconds.
So a page with 48 separate files works out to 5.4 seconds overhead on a 'middle of the road' connection; but you get on a choked out work connection or free internet at your local Panera Bread or McD's with a 2500ms ping time (bordering on timing out), it could EASILY go past a minute and a half for the same number of files. This is why typically I try to keep the number of separate files -- at least for the template not counting content images -- below 12... and try to avoid having more than another 12 content images. 24 images total seems a reasonable limit and keeps the page load time peppy; as opposed to the multi megabyte in hundreds of files monstrosities some people vomit up and try to call websites.
It's why I also set a fixed limit of two external .js and two external CSS per media type limit. IF a design is going to need more than that, I throw the design away as being "non-viable for web deployment."
Goes hand in hand with another of the formulas I use, which is a ballpark guesstimate of how big the HTML file should be.
1.5K + Text content * 1.5 + 128 bytes per form element (input, textarea, select, option, button) + 256 bytes per object (object, img, audio, video, etc.)
If an HTML file is significantly larger than that formula returns, it's probably poorly coded. If it's more than twice that, it IS poorly coded. Usually my code ends up at about 80% to 110% of that number.
Which goes with my page size limits -- which for the past five years have been 70k ideal and 140k max... That's HTML+CSS+IMAGES+Scripts. If a page goes past that and isn't something that should obviously break that (like say, a gallery page full of thumbs) then it's time to throw out the concept and start over. I've been playing with the idea of upping that to 96k/192k -- but can't bring myself to actually do it when my phone plan tops out at 768kbps, half my friends are in canada with their wonderful new bandwidth caps, and the mere fact that while I can get 22mbps at home, I travel 50 miles north to Coos County, 33.6k dialup (as a long distance phone call) is a good day for the folks up there! (also see the Dakota's, much of Utah, etc, etc)... and that's before we talk about server load; theres a reason my specialty was taking sites that were choking out dual quad-core Xeons and running them on a single core P4 at four times the traffic levels.
In any case, sliding backgrounds, aka "CSS sprites" (never liked that term -- I think "sprite" I think of hardware sprites moving around the screen), are a common way to reduce that number of files and quite often result in a smaller file as well. When you color reduce to 17 to 256 colors a 'palette' of 768 bytes (256*3) is stored in your PNG/GIF/BMP... as four separate files that's four palettes -- as one file it's one, saving you 2.3k... if the image shares like colors in a narrow palette you can use less colors -- and with long horizontal runs of the same color as .png they can get really small.
The savings in file size AND handshakes means a faster loading page, even if it does end up a wee bit of extra CSS...
The same technique is often used on menus for hover states. I wrote up a quick tutorial about that not too long ago... draft content for cutcodedown when/if I ever launch the blasted thing. (Project has been stagnant since Dan's passing since he was the idea guy, I was the content guy)
CSS Background-Image Sliding Doors Demo
All three menu states in the demo being stored in one file.
Very common technique -- I use it a LOT. It's a technique I suggest everyone learn -- and use a LOT. Combine it with sliding doors, and you can do things like my Eight Corners under One Roof