There is quite a bit of information on the intertubes going over some fundamental css naming conventions. However, most of these conventions are from designer's point of view.
I'm going after conventions from a web application developer's point of view. As a web application grows, and UJS (unobtrusive javascript) is used throughout the codebase, what naming standards have grown around your css classes. The reason this is a little awkward is that css classes are somewhat overloaded in their use.
- On one hand, css classes are used by stylesheets to help present your content well.
- On the other hand, css classes are used by UJS libraries (like jQuery) to help tie javascript code to certain elements on a given page.
A covention that comes to mind from a rails application perspective is something like
.controller-action
{ /*styles */ }
Other thoughts are prefixing your classes with hungarian-notion:
.js-controller-action
{ /* styles */ }
the js, prefix, would delineate those elements with ujs code attached to them.
Personally, I'm interested in this from a rails application perspective, however, I can see how this could apply to any web application framework and UJS javascript library.