0

Dear folks, staring at the minified CSS I put together so proudly the other night, I desparately tried to remove more chars here or there, like those wasted whitespace: " " meanwhile the more I stared at this code, the more I started to see patterns, clearly emerging from these bodies, asif this was the absolute minimum, plus some hidden message Now let me get to the point for this question is already too contaminated with nonvital letters already: Is there a way we could further minify my otherwise humungously gigantuous monster css file into a more bandwith friendly, really small file? Much appreceated!

enter image description here

1
  • 2
    Because removing the whitespace that is remaining could break your layout.
    – Jeremy B.
    Commented Mar 17, 2011 at 19:57

2 Answers 2

Reset to default
2
  1. If your css is hosted on the same site as your images, use relative paths in your url()s: background:url(/path/to/file.png)
  2. Use shorthand where applicable: margin:0 instead of margin:0px 0px 0px 0px
  3. Try running the CSS through a real minifier such as the YUI Compressor
  4. As a last resort, shorten your class names in the CSS and the related HTML
  5. Pass it to the left...
10
  • +1 Awesome @ithcy: just replaced all :0px 0px 0px 0px instances with :0 14 characters saved time 21 occuring instances: You saved me ± 300 chars! Thanks.
    – Sam
    Commented Mar 18, 2011 at 0:45
  • @Sam: bear in mind that gzipping reduces the effects of repeated character strings on file size to almost nothing. Obviously there’s no harm in squeezing what you can from minification, but generally you won’t get very noticeable results.
    – Paul D. Waite
    Commented Mar 18, 2011 at 1:18
  • @Paul D. Waite: When You don't have control over your server environment (mod_deflate etc), a good minifier is a really useful thing.
    – ithcy
    Commented Mar 18, 2011 at 20:22
  • @ithcy: sure, but whenever I've measured it, minification alone takes off about 10-15%, compared to 60-90% for gzipping. So I reckon you’d be better off spending your time getting a server environment that gzips stuff, it’s not exactly a specialist, high-end feature. You’d expect any half-decent hosting service to do it automatically, if only to reduce their own costs.
    – Paul D. Waite
    Commented Mar 19, 2011 at 0:45
  • @Paul: Agreed of course, but it's not something you can count on 100% of the time. We can't always have full control over our host environments.
    – ithcy
    Commented Mar 22, 2011 at 19:02
2

You've got a bunch of "0px" values in there, just make them "0" to save a couple of characters each there. Also, your negative text-indents could be -999em instead which saves a couple of characters and equals roughly the same depending on the base font-size.

And as @ithcy said, use short relative paths or re-host at imgur and reference as url(//imgur.com/name.jpg) instead will save some bytes too.

Edit: Duh, I just re-read @ithcy's answer and it mentions most of what I said anyway.

Not the answer you're looking for? Browse other questions tagged or ask your own question.