3

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?

Improve this question
4
  • "they are nesting classes unnecessarily and causing the browser to do more work". I think the amount of work a browser has to do there is quite trivial. Commented Feb 6, 2013 at 20:36
  • When you create a library like this, I think you'd consider such things though because they can be used many times over. It's also downloaded A LOT making bandwidth an issue. Commented Feb 6, 2013 at 20:42
  • The bandwidth issue is pretty much non existent. .ui-dialog takes up about 10 bytes? 10 bytes x 1 million downloads = 9 megabytes Commented Feb 6, 2013 at 21:24
  • @CHS The reason is most likely a specificity issue, though you are more likely to get an answer about this directly from the core team if you ask it either in the jQuery UI forum or on the jQuery UI IRC channel. All we can do here is speculate why they did it. Commented Feb 6, 2013 at 21:33

3 Answers 3

Reset to default
2

Most likely because the CSS for .ui-dialog-titlebar-close and .ui-dialog-content is reusable. So basically they are ensuring these classes will only inherit specific styles to the dialog when they are children of .ui-dialog

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

The thing is I don't think they are reusable. You'd never see them used outside of the dialog widget in the ui namespace, hence their naming conventions.
@CHS that doesn't stop you from using them yourself for your ui, or for a custom widget.
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;
}
Improve this answer

3 Comments

jsfiddle.net/457N8 Can you show me which element on this fiddle you see ui-widget-content 's background being overwritten?
It is the div containing "hello". The html in my post was from a dialog shown via a button. It's not just the background either. It also removes the border.
Thank you. I was not aware that would happen. I need to brush up my understanding of CSS rules it seems.
1

You're correct about the fact that shallow, preferrably one-level selectors are preferable - at least from the performance perspective, at least in theory. However in most cases rendering engine optimizations offset the otherwise miniscule performance overhead.

This is when ease of maintenance, readability and size of the stylesheet kicks in. Reduced specificity allows to recycle "partial" classes - if you look at the rendered markup, .ui-dialog will have a whole bunch of other classes applied to it:

ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable ui-resizable

Would it have been preferable to instead have all the properties applied in one rule? Definitely not from the developer point of view, that approach would have made it into a maintenance nightmare. Imagine changing a single presentational property and then having to backdate it to all "specific" rules like in your example!

The reasoning for qualifying the ansector selector (e.g. .ui-dialog .ui-dialog-content) is a lot more trivial, if not immediately obvious - to increase specificity of these selectors. For instance, .ui-helper-reset class basically anulls any previously set style since the rule is declared at the bottom of the css file:

.ui-helper-reset {
    border: 0 none;
    font-size: 100%;
    line-height: 1.3;
    list-style: none outside none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    text-decoration: none;
}

To override any of those properties, a higher-specificity selector has to be used.

Personally I dislike this pattern - and I hope that code consistency contributed more to the reasoning behind such class structure.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.