Who You Calling A Jesse?

Trying to sort the brilliant ideas from the lesser ones.

How do you deal with a mess in your CSS?

Posted by Jesse Rodgers on January 08, 2009 at 12:54 PM

Quick question. If you have multiple devs working on a few different screens, each monkeying with CSS, it takes very little time to end up with a huge mess of CSS. How do you deal with that? Do you:

  1. Delete the CSS and start again defining a common sheet?
  2. Try to optimize the CSS.
  3. Live with it.
  4. Don’t ever let dev’s touch CSS… they are dirty.

I ran into a 6000+ line CSS file for a dozen pages. They each have some heavy js UI going on but 6000 lines? An auto-optimizer cut it to 2200 or so pretty quickly but you can’t work with that file. I decided to start again, clean.

The upside is that I know the site mostly works without CSS and it exposed some odd decisions with some of the HTML (yay for nekkid web sites). The downside is that we may have to deal with browser bugs all over again—but then again we do not support IE 6. Only IE 7+, FF (latest), Safari (latest).

Feature request for Dreamweaver CS5 – something to optimize my CSS!

Comments

There are 5 comments on this post. Post yours →

Start with a CSS reset. Reset all the elements and fonts. That way you never have to repeat margin:0; padding:0; font-family:arial, helvetica, sans-serif, etc througout your CSS.

Just note that FF does not inherit font-family, so if you over write a font, you can’t just write p.happy {font-family:comic-sans;}. You have to redeclare a default for FF or it will default to the browser default rather than the p default.

When I clean up CSS files, I start with a reset, and then globally remove every default value for font-family and font-color, margin of 0, padding of 0. This usually removes about 15% of the bulk of the CSS file.

@estelle we have the reset in there, the problem is that with inexperienced devs is that they then make a mess undoing the reset. I need to give a lesson on specificity to try and avoid a lot of this in the future.

sbwoodside

you’re screwed. there is no easy way. simplifying it is very time consuming. throwing it away is also time consuming. i’ve done both.

wasabi

How did something that could be done in only 2000 lines or less grow to 6000 lines in the first place anyways… Just curious.

@wasabi – if you have half a dozen people working on a UI they get a little too specific about the interface they are working on. Better co-ordination between folks can reduce the effect. Also when a UI changes a lot based on user feedback stuff doesn’t get deleted.

Post a comment

Required fields in bold.