What are some tips for writing good CSS?

Question

I just started doing web-development a few months ago. I know HTML and know how to markup a page to be semantically correct (no using tables for layouts, using the new semantic elements from HTML5 correctly, etc). I try to adhere to W3C design recommendations. However, I'm having trouble writing "good" CSS.

I know about using efficient selectors such as the child selector instead of the descendant selector and so forth. My problem is that I feel my CSS doesn't match up with my markup's semantic. CSS is supposed to be reusable, meaning that the same class can be used for multiple elements on multiple pages. But the CSS classes that I write only apply to a few elements (often on only one page) and are never used again. I'm often writing the same styles, but with small changes, for many classes. This goes against the DRY principle of development.

Am I not using CSS to its fullest potential? What are some ways of making my styles reusable without doing stuff like .right-align { } .blue-text { }?

Answer 1

My current best suggestion would be to take a look at Object Oriented CSS. It's a little bit of a change in viewpoint, but it's a solid concept, and definitely worth a look.

Answer 2

You're not going to be able to adhere to DRY with CSS - you will get repetitive. What I like to do is use classes to specify more general theme elements and on top of that use the IDs to differentiate.

You should read this: http://www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html

Answer 3

But the CSS classes that I write only apply to a few elements (often on only one page) and are never used again. I'm often writing the same styles, but with small changes, for many classes. This goes against the DRY principle of development.

Sounds like the DRY issue is with the design, rather than your coding. If the design calls for things that look different on every page, there isn’t much scope for re-use.

I generally find there are two situations that warrant creating a class:

1. The design calls for a component, e.g. a log-in panel, that’s conceptually one thing (although it’ll probably be made up of more than one HTML element), and requires its own styles. That’s when I’d create a class like log-in-panel.

2. There’s a reasonably complex style (e.g. a box with a drop-shadow, rounded corners, borders, and a gradient background, and it has to look like that in IE too) that’s used in several places with no particular conceptual link between them. That’s when I’d create a class like .box1. If I had semi-complex code shared between different boxes (implementing these in IE 6 is a favourite nightmare task at a company I’ve freelanced at), I’d split that out into a class like box.

If you’ve got several classes that use kind of similar styles, that’s not necessarily a problem. CSS is generally pretty simple. DRY is useful when maintenance and bug fixes for a piece of code don’t have to happen in more than one place. If the repeated CSS isn’t that complicated, then there’s no need to worry.