CSS: Using pseudo-namespaces
In his article CSS practice: Pseudo-namespaces in complex projects, Jens Meiert explains in detail how to use descriptional text inside your CSS classes and IDs to group several of them together.
Originally, I wanted to post this as a comment to the article, but then it overgrew on size, thus I’m posting it here 
Great! I’ve been using a similar method for about 2 years now – and it helps a lot!
But I’m using it a bit different than the described method. What I avoid is using abbreviated names like Meiert does in his examples. Instead, I’m using “speaking names” (sprechende Namen), which improves the readability of the code a lot.
An example for this might be:
#header-top-navigation
or:
.header-top-subnavlist
In both cases, header is of course a heading element. top defines that it is the upper part of the heading element.
The navigation in the first example is a container element for navigation items, whilestsubnavlist in the second example refers to several sub-navigational unorderded lists.
To increase the documentation and readability part, I’d suggest you to structure your CSS code using tab or space inserts to display which ID and class is a sub-element of the one before. That could look like this:
…
}
#header-top-navigation-navlist {
…
}