Are there CSS class naming standards for web applications?

css, javascript, naming-conventions, web-applications

Solution

I found a good article on this.

Structural Naming Convention in CSS

and also

CSS coding: semantic approach in naming convention

Problem

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.

Original source

Related problems