CSS Specificity and normalising your stylesheets after a tight deadline

Question

I have just finished building a heavyweight long sales page, with a lot of elements and varying styles on the page.The CSS has ended up being over specific with its selectors, and there are numerous rounded boxes, background images etc. In short, the CSS is a bit of a mess. (only myself to blame!)

Can anyone suggest a method of going through this stylesheet methodically, in an effort to combine my duplicate properties etc? I doubt there are any tools to do this for me, but I'm wondering how others deal with this situation?

Thanks.

Answer 1

1. Combine CSS to their shorthand properties if possible.
2. Take advantage of unique dom ids to apply styles to the children of that element.
3. You can use multiple CSS classes on the same element, for example class="somestyle some-other-style". Using this you can take duplicated CSS styles and define them in one.
4. Use the * selector to apply styles to all the children.
5. If its all in one big CSS file, split the code into sections where the styles are relevent to the pages across your site, i.e /* MEMBERS PAGE */
6. Run the style through an online compressor to reduce code size. Some even combine elements automatically for you, further adding less complexity.

That should get you started. It's hard to add further, it really depends on how your html code and structure is set out. If you could provide an idea we could assist further.

Answer 2

There are in fact some CSS Refactoring tools, which were covered on SO pretty well.

I can't vouch for them, though, since I always refactor by hand. My technique is to separate existing styles into:

• Layout
• Typography
• Colors (Look & Feel)
• Hacks

That's usually a quick copy & paste job. From there, similarities and redundancies are a lot more apparent, so combining and simplifying gets much easier.

With that done, having a TOC at the top of the page makes your sections easy to find, and generally easier to search.