Question

Why does jQuery UI write CSS like this:

.ui-dialog .ui-dialog-titlebar-close {}
.ui-dialog .ui-dialog-content {}

Since their class names are so descriptive I would think it faster and just as unlikely to have any collisions if they did this:

.ui-dialog-titlebar-close {}
.ui-dialog-content {}

It seems to me they are nesting classes unnecessarily and causing the browser to do more work but I wonder if there’s a good reason for it that I’m not aware of. Does anyone know why they nest the classes as they do?

Answer 1

They do this to be specific.

The element with the class .ui-dialog-content also has several other classes such as .ui-widget-content.

<div id="dialog" class="ui-dialog-content ui-widget-content">

To ensure that the rules of .ui-dialog-content trump those of the other classes they add .ui-dialog infront.

This is evident when you inspect the element. The background and border rules of .ui-widget-content will be overridden.

.ui-dialog .ui-dialog-content {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    overflow: auto;
    padding: 0.5em 1em;
    position: relative;
}

.ui-widget-content {
    background: url("images/ui-bg_highlight-hard_100_f2f5f7_1x100.png") repeat-x scroll 50% top #F2F5F7; /* Overridden */
    border: 1px solid #DDDDDD; /*Overridden*/
    color: #362B36;
}