Bloated CSS Style Sheet...

Question

My style sheet is about 60k... much too big.
Trying to find a way to put it on a diet.
Is there a way to convert it to ' css shorthand'?
I set the preferences to use shorthand for css declarations but don't see any change in existing style sheets.
Help appreciated.
Dan H.

Answer 1

Hi, Dan,
Without your code in front of me, I'll be shooting arrows in the dark, but here goes. (at 60k, I'm pretty sure we don't want you to copy it in here!)
1. Check for styles that are very nearly the same as each other. You can 'gang up' many styles into one declaration, and only separate out the bits that differ:
Instead of
h1 {
     font-family: Verdana, Arial, sans-serif;
     color: blue;
     font-size: 1.4em;
h2 {
     font-family: Verdana, Arial, sans-serif;
     color: blue;
     font-size: 1.2em;
h3 {
     font-family: Verdana, Arial, sans-serif;
     color: blue;
     font-size: 1.1em;
(note the similarities?) use
h1, h2, h3 {
     font-family: Verdana, Arial, sans-serif;
     color: blue;
     font-size: 1.4em;
h2 { font-size: 1.2em;}
h3 { font-size: 1.1em;}
Put the fuller-bodied style first and the difference styles after, so they will rule for their particular attribute stylings.
2. ONLY style those attributes that you need to style. You need not define EVERY possible attribute of a tag, etc. The lists of attributes that you see in the CSS Styles Panel (Show Category View, for instance) are only there for your convenience. They are not all there because you need to actually style them all, all the time. If you are restyling a Heading 1 and are only changing the default color to blue, only style that attribute.
3. If you are using Spry Widgets, leave those styles in their own CSS file, don't bring them into your site CSS file. You can link multiple CSS files to your pages.
If you see any of these possibilities for your style sheet diet, give them a try. If you can upload the file and give us a link, I'm sure we can come up with some additional suggestions!
Z