css naming convention discussion (jqueryui)

Question

Am working on a project that involves a huge deal of client side code. We were discussing naming conventions for css classes and element IDs and I was surprised there are no material online about that.

I have noticed that jquery ui uses a convention where style named are flattened (like ui-widgetname-classname-[subclassname]) as opposed to naming these classes based on their hierarchy (.ui .widget .classname). I guess this makes it less dependent on DOM structure but creates extremely long names.

Based on your experience, do you have a style guidance for naming css styles? any Dos and Donts and pitfalls to avoid?

Hope to hear from you

Answer 1

Using .ui-widget-classname instead of .ui .widget .classname is due to support for legacy browsers (namely IE6/7). While being able to selecting multiple classes at once would make your CSS more readable and maintainable, IE6/7 would not behave as expected.

For example, to target that exact element, you would need to chain the styles like so:

.ui.widget.classname {
  background: red;
}

Would match anything element with .classname in IE6/7. Classes like .ui-widget-classname give you a very specific selector to target, at the cost of verbosity.

The other solution is nesting divs, like so:

<div class="ui">
  <div class="widget">
    <div class="classname">
    </div>
  </div>
</div>

.ui .widget .classname {
  background: red;
}

In which case your styles will work across all browsers.

Between these two options, I imagine jQuery UI chose to modify the DOM as little as possible with a single div while still providing easy access for styling.