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 es 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.

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 es 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.

• javascript
• css
• web-applications
• naming-conventions

• The motivation for this question is the software development principle that your code should be as self documenting as possible. Does this apply to css classes in your markup in relation to UJS code? – casademora Commented Sep 9, 2009 at 4:57
• I would consider the "UJS" Hungarian notation itself obtrusive. – Christopher Parker Commented Apr 22, 2010 at 16:11

1 Answer 1

I found a good article on this.

Structural Naming Convention in CSS

and also

CSS coding: semantic approach in naming convention