Javascript – Are there CSS class naming standards for web applications

cssjavascriptnaming-conventionsweb-applications

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.

Related Topic