Hey folks...

Just a quick question. What do folks consider to be an acceptable file size range for CSS files? Just curious because I'm using a CMS and it tends to lead to a somewhat more bloated stylesheet. I'm working to clean it up and just wanted to get a target. Right now it's about 11k but I'm still working on it.

I asked on the #css channel on Freenode, but some holier-than-thou CSS snob simply said: "If you're worried about file size, you're clearly doing something wrong."

< 4 is optimal, however, as high as 8 is acceptable.

Anything greater than 10 and it's just too large.

A google search brought me here with the following question remaining - why should de CSS be as small as possible (less than 10K) ?
What would be the effects if you try to load a 36K CSS file from a webserver, would correct css table definitions be less predictable or considered to be unstable for example? I have a case here which involves a 36 K stylesheet, sometimes pictures in a 3 column by 4 rows table is being mixed up like the example below.

Correct presentation should be:
-------------------------------------
1 2 3
4 5 6
7 8 9
A B C

Becomes sometimes:
-------------------------
1 2
3
4
5 6 7
8 9
A B
C

CSS contains:
----------------
table.fg_table_four_column { background-color:#ecedf4; margin-bottom:1em;}
table.fg_table_four_column tr { height:120px; }

#subhome_middle table.fg_table_four_column tr td { font-size:1em; float:left; padding:10px 10px 5px 0; width:80px; vertical-align:top; }
#subhome_middle table.fg_table_four_column tr td a img { display:block; border:1px solid #8e99c5; margin-left:0px; margin-right:0px; text-decoration:none; margin-bottom:3px; }

#subhome_middle_long table.fg_table_four_column tr td { font-size:1em; float:left; padding:10px 10px 5px 0; width:80px; vertical-align:top; }
#subhome_middle_long table.fg_table_four_column tr td a img { display:block; border:1px solid #8e99c5; margin-left:0px; margin-right:0px; text-decoration:none; margin-bottom:3px; }

#subhome_middle table.fg_table_four_column tr td a:hover img { border:1px solid #cc0000; text-decoration:none; }
#subhome_middle table.fg_table_four_column tr td.first { padding-left:10px; }

#subhome_middle_long table.fg_table_four_column tr td a:hover img { border:1px solid #cc0000; text-decoration:none; }
#subhome_middle_long table.fg_table_four_column tr td.first { padding-left:10px; }

Hope someone can help. Thanx!

You CSS file size depends all on how much CSS is necessary to implement a design effectively in a wide array of browsers. I wouldn't worry about the file size until it's done and works. Then, you can look into preprocessing/gzipping for optimization.

emping,

After a quick look at the style samples you've provided, I don't think that optimizing CSS file size should be your primary concern.

First off, I'm going to go out on a limb here and guess that you're still using tables to layout your page. That's not going to help your file size. Your ID and class names aren't helping either.

Specificity in a CSS file is a good thing, but you need to concentrate on the first C in CSS: Cascading. a well written style sheet will establish styles that may be used across an entire layout rather than specifying (the same) individual linked image hover states in individual table cells.

On another note... I'd like to address my initial statement which is approaching 2 years old. I disagree that "Anything greater than 10 and it's just too large." With ever-increasing broadband penetration and the ability for a browser to cache the style sheet, 10k seems minuscule.