1

Possible Duplicate:
Is there any way to find unused css in a website?

I'm looking for best practices on how to clean up existing style sheets and also inline styles. I have some style sheets in existance, and I'd like to clean up the bloat so they are more maintainable in the future.

Can we make this a community wiki?

Community
  • 1
  • 1
MAW74656
  • 3,449
  • 21
  • 71
  • 118

1 Answers1

1

There is so much that can be said about best-practice methods for CSS. I'll try to stick to the main points.

Use a CSS reset.

Try to remove really general CSS statements like h1 {} and #container em {}. You're much better off using h1.section-title and #container em.important {}, because that way if you choose to use h1 or em a different way somewhere in your document, you don't have to worry about overriding any existing code.

Don't be too specific in your CSS selectors if you don't have to. You really only need to have high degrees of specificity if being in a specific section changes how the element is going to be displayed. Otherwise, to make your code for your block class reusable, #container .content .block ... could be reduced to .block ... in many cases.

Look for commonalities in your CSS and see if you can create reusable classes. If you have similar blocks class="favorites" and class="popular", turn it into class="block block-favorites" and class="block block-popular", and put the commonalities into .block.

Get in the habit of making areas in your CSS have an auto-width (can be done implicitly) so that they grow to the width of your containers. This makes it incredibly easier to move sections from a narrow portion of your website to a wide portion of your website without having to change any code.

Commenting your code and breaking it down into sections usually helps make code more readable.

You'd be surprised how much cleaner your code looks when you implement more powerful CSS selectors. Most of them are cross-browser compatible (IE7+).
Some valuable resources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors

Wex
  • 15,539
  • 10
  • 64
  • 107