How big is too big for a CSS file?

Question

I've coded some pretty hefty CSS files before, but this one I'm working with lately is over 20k! IMO, thats a bit on the bulky side, but the CSS can't really be condensed anymore, so there isnt really much I can do. What do you guys think is a good max filesize that a style sheet should be?

Answer 1

Gee even for my most complicated website I've gotten by with 10k...what're you doing that's so hefty? Have you tried combining items that have similar values? (Like, say, if div#name1 has background-color: #fbfbfb
...
and div#name2 has background-color: #fbfbfb
...
have you tried
div#name1, div#name2 { background-color: #fbfbfb

...and other such?

Stuff like that may help pare down the size of the css. Also for your reader's (downloader's) benefit, you may wish to maintain a commented version for yourself and an uncommented version to place online...

Answer 2

fjpoblam is right, that's way too big and something can definitely be done to condense it. Here are two suggestions:

1) Are font family, size and color reiterated for every style?

e.g.

body {
font-family: Verdana, Arial;
color: #333333;
}

p {
font-family: Verdana, Arial;
color: #333333;
}

h1 {
font-family: Verdana, Arial;
color: #333333;
}

If so, remember that these are "cascading" style sheets and if you set these attributes on the BODY tag they will cascade down to the other tags. Therefore you only need to specify these attributes for other tags if they are to be a different color/size/font than the norm. That will save a lot of typing!

2) Can you set attributes for multiple styles at once?

If your css code said:

#header {
background-color: #666666;
color: #ffffff;
}

#footer {
background-color: #666666;
color: #ffffff;
}

#navmenu {
background-color: #666666;
color: #ffffff;
float: right;
}

You could change it to:

#header, #footer, #menu {
background-color: #666666;
color: #ffffff;
}

#navmenu {
float: right;
}