I'm tidying up a website that has been previously modded by different people in the past. Here is the skeleton of the page I have..

I think the CSS could do with a proper tidyup. I was thinking of using a reset like this

to replace :

*{margin: 0; padding: 0;}

and maybe split up the css into fonts.css, layout.css

Any thoughts, suggestions how I can tackle this problem would be grateful.

Was it helpful?


You might want to encapsulate your css within a more formal CSS framework. You can create your own custom framework but there are some useful open source css frameworks such as yahoo's YUI and Blue Print CSS

The nice thing about this approach is that it leverages a lot of effort to fix the cross browser issues around fonts and layout.

Depending how far you go you may have to extensively touch the existing markup. Depending on how large your site is I would try to incrementally adjust styles and migrate them over to the formal CSS framework. Long term this will make the CSS more manageable and easily understood by other developers familiar with the concept of the framework.

Progressively try to eliminate redundant and unaccounted for styles.

I would also create a debug.css file. Take all the old style names and add an identifying style to them. For example:

.myoldstyle {border: solid 1px red};

Then you can detect where the old style is being used throughout the site. Each style should be accounted for and ported over to the new system. When a particular style in the old system has been correctly migrated to the new system you can remove (or better comment out) the identifying style from the debug.css file. You can be confident that you have migrated all the styles when the debug.css shows no side affects in the display output.

It can be a time consuming process but approaching it systematically can be helpful.

Also, you may want to start looking at your site with no css at all. Just get a sense of the logical and semantic markup of code. Having a clean HTML code base helps when debugging style quirks.

As for organization of CSS, I like to separate into basic categories: layout, typography, lookandfeel, navigation

Keep all color related information in the lookandfeel style sheet. This is where you will spend the most time trying to meet the client's visual tastes and desires. It is handy to keep that is a separate logical style sheet. The other stuff is more functional and standardized. Having this abstraction makes it much easier to isolate the visual effects of styles.

And one last tip, check out Firefox firebug plugin or Safari's debbugger. These can show you computed styles (the way styles and elements are ultimately derived as the various styles are applied) and you can tweak specific styles in real time on the fly it you want to explore the effects of a specific style change in a complex CSS system.

And most importantly, keep a separate ie.css file around. This should be the last style sheet referenced in your headers. If you need to do any workarounds for IE put them here. And only expose this style sheet to IE through conditional comments.

That is the fastest way to resolve IE 6 problems.


Maybe a good place to start would be by reading Common mistakes for CSS-designers to avoid? here on Stackoverflow. As noted in that thread, a reset file is commonly regarded as a good idea. I would also run your CSS through the W3C CSS Validator to spot any warning or errors. It may also be a good idea to remove any superflous styles and ones longer referenced (I'm afraid the only way I know how to do this is manually, by eye).

Firefox has a great extension called Dust-Me Selectors for removing classes/ids that are not used. Use with caution obviously, since CSS files are likely included from more than one place, but it's a useful aid.

I'm a big believer in CSS resets - particularly Eric Meyer's reset, but trying to graft on a reset to an existing site can be really tricky.

You don't really have a huge amount of CSS, so I'd be tempted to combine it all into one file and organize/optimize it manually.

Check out Natalie Downe's presentation on CSS Systems - read the PDF as it includes a ton of notes not included in the slide show.

Start using SASS and Compass. Mixins, variables and other super nice stuff. Your code css will become DRY and maintainable. They also play nice with grid frameworks like YUI, Blueprint and 960 and gives you the semantic edge you need.

TopStyle is a great app that does what few other CSS tools are able to do in terms of cleaning up code. It was able to isolate countless redundant styles, rules and attributes in our portal's massive CSS files that other tools were not able to find. It really is the best CSS tool out there. The demo version has slight limitations but still gets most things done.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top