CODEWITHSUNDEEP
css
willdanceforfun
willdanceforfun

Reputation: 11250

Does the order of different styles in a rule matter?

I have noticed that when I look at a rule I have written say for example:

label { 
font-size: 12px; 
position: absolute; 
padding: 9px;
color: #666;
}

In firebug, it translates as:

label {
color: #666; 
font-size: 12px; 
padding: 9px;
position: absolute; 
}

Basically, reordering the styles. Why?

Is there an 'ultimate' priority I could be putting in my styles to improve load speeds? Ie is there a load order I'm unaware of?

Upvotes: 2

Views: 118

Answers (4)

yunzen
yunzen

Reputation: 33449

Well, as the others stated before, the order is important in letting the browser choose, which rule to use, but in order of performance I haven't heard of something like this. As CSS is just a text file the downloading speed will not be affected. BUt I don't think anyone has examined this topic with some test cases.

Upvotes: 0

cherouvim
cherouvim

Reputation: 31928

The order of styles in your rule does not matter. Firebug seems to sort alphabetically in your case (it may be incidental).

Of course the order will do play role in this, problematic, case:

.foo {
    background: url(foo.png) top left repeat-x;
    background-image: url(bar.png);
}

Upvotes: 3

paulsm4
paulsm4

Reputation: 121871

In general: Yes, order does matter in terms of what properties will actually be set.

You can Google for many links on CSS precedence, for example:

http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

But as far as what you see in the debugger - that's not at all significant for how the CSS will actually be rendered. The order of "color", "font-size", "padding" and "position" in this particular class are simply an artifact of Firebug.

Upvotes: 0

Tessmore
Tessmore

Reputation: 1039

Yes the order matters:

label { 
font-size: 12px; 
position: absolute; 
padding: 9px;
color: #666;
font-size: 15px; 
}

The font-size (15px) will overrule the 12px

Upvotes: 1

Related Questions