What are the best practices for writing maintainable CSS?

Programmer Question

I am just starting to explore this area and wonder what are the best practices when it comes to production of clean, well-structured and maintainable CSSes.

There seems to be few different approaches to structuring CSS rules.

One of the most commonly encountered ones I saw was throwing everything together in one rule, i.e. margins, borders, typefaces, backgrounds, something like this:

.my-class {
    border-top:1px solid #c9d7f1;
    font-size:1px;
    font-weight:normal;
    height:0;
    position:absolute;
    top:24px;
    width:100%;
}

Another approach I noticed employed grouping of properties, say text-related properties like font-size, typeface, emphasis etc goes into one rule, backgrounds go into other, borders/margins go into yet another one:

.my-class {
    border-top:1px solid #c9d7f1;
}

.my-class {
    font-size:1px;
    font-weight:normal;
}

.my-class {
    height:0;
    top:24px;
    width:100%;
    position:absolute;
}

I guess I am looking for a silver bullet here which I know I am not going to get, bet nevertheless - what are the best practices in this space?

Find the answer here