Are there speed benefits of putting CSS attributes

Question

I hope this question isn't too weird and arbitrary. When I'm viewing some CSS using Firebug, I've noticed that the CSS properties for each tag are in alphabetical order.

Is it trying to tell us something?

Apart from the obvious benefit of being able to find the property you're after more quickly, I was wondering this: Is it quicker for a browser to apply the properties if they are in alphabetical order in the original stylesheet?

For example is this...

body {
  background: #222;
  color: #DDD;
  font-size: 0.85em;  
}

#content {
  background: #444;
  padding: 1em;
}

p {
  border-bottom: 0.9em;
  line-height: 1.2em;
  text-align: justify;
}

...better than this...?

body {
  font-size: 0.85em;
  background: #222;
  color: #DDD;  
}

#content {
  padding: 1em;
  background: #444;
}

p {
  text-align: justify;
  line-height: 1.2em;
  border-bottom: 0.9em;
}

Can this be tested effectively?

This would obviously be replicated throughout the entire stylesheet so would a browser benefit from doing things in order and, if so, would it be worth revisiting past stylesheets to reorder things?

-- edit --

Ok, a slight alteration to my question: What if the attributes are always in the same order for each tag. Background always before border always before color etc and so on (I know I've missed some!) for each and every tag. Alphabetical would aid you in keeping things in order rather than being the optimal method.

Looks like the overwhelming consensus is that it matters not, however!

Answer 1

I don't think order of statements affects speed in any way, however, the efficiency of the statements can affect performance. (Slightly tangential, I guess...)

See: http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors

Answer 2

There's definitely no speed benefit in ordering your styles alphabetically.

If you want real speed benefits, you should minify your CSS.

There are so many programs to do that, but here's one of them: CSSTidy. This program also has the option to put your styles in alphabetical order (if you want that for your benefit).

Answer 3

The performance benefit is for visual parsing only - FireBug will re-arrange your style attributes into alphabetical order when you inspect an element, which I find much quicker to locate a style attribute.

Answer 4

Firebug do it so that developers can search for an attribute value easily, and if you want speed benefit, write your css judiciously, which includes mainly avoiding repetition and redundancy and being DRY

Also when a page loads and CSS is parsed and layout is rendered once, next time its not done again, so stay calm, and try to make it more maintainable instead