The correct order of selectors in stylesheets

[tayiper]

Hello all. You see, n the Further discoveries: display in Firefox vs. Intenet Explorer (http://www.webdeveloper.com/forum/showthread.php?t=108102) thread that I opened back then on WebDeveloper.com forum the user "WebJoel" wrote the following:

Also, your "body" statement in the CSS really should be the FIRST thing in the css, as it governs everything. Sure, -it works this way, but you want to tell the browser to do this first to the body, and then, do everything else.

So I am interested: is this true or this doesn't really matter??!


thanks for any reply, tayiper

[felgall]

The order that the entries in the stylesheet appear affect which one takes precedence when two entries conflict (that is what cascading is all about - the closer/more specific rule gets applied).

The other aspect to which order to put the rules in relates to ease of maintenance of the stylesheet. If you always put the more general rules at the top and more specific rules underneath then it is easier to find the one you are looking for at a later date.

[tayiper]

Thanks much for the quick reply ...


tayiper

[Centauri]

And following on from what felgall said, rather than starting my css with body declaration, I start off with the more general * {border:0; margin:0; padding:0;} This zeros out browser default settings so that things display more the same cross-browser. I then follow this with the body declaration (or sometimes html declaration, depending on what I am trying to do). I have a tendency to declare elements in the css in the same order as the page flow.

Cheers
Graeme

[tayiper]

I have a tendency to declare elements in the css in the same order as the page flow.

... and I generally tend to do it in an alphabetical order, not sure why thought, I guess it's just one of my obsessions, lol.


tayiper

[felgall]

If you put them in groups from most general at the top to most specific at the bottom then you can easily search up from the bottom to work out which styles will apply in a particular situation. If you hhave them in any other order then you never know if a rule near the bottom of the file will be overridden by one considered to be more specific that is higher up.

Of course for entries that are unrelated and equally specific there is no reason for choosing any particular order and so listing them alphabetically within each group is at least more consistent that listing them randomly. If on the other hand you list them alphabetically regardless of how specific they are then you may not get the results you exprect.

For example the following must appear in the order shown:

a.link
a.visited
a.hover
a.active

because if you put them in any other order then one or more of them will be ignored because to make a link active you must have the mouse on it and so hover also applies, you want visited links to respond to hover as well as unvisited ones, and since they are all links the a.link will catch any link that gets as far up as that line.

[WebJoel]

And following on from what felgall said, rather than starting my css with body declaration, I start off with the more general * {border:0; margin:0; padding:0;} Actually, I guess that I do that too. And also what Felgall said about 'order of precedance'. My 'body' styles will be called first, my H1 (and all other H) will probably be called next, my <p> style etc., is there a navigation list in <ul>, -then that, etc...
I 'optimized' a rather large CSS file that I was working on recently... what a disaster!! Sure, I 'saved' about 40% over the unoptimized state (okay, -saved 7 or 8 KB maybe?), -but I wasn't really FINISHED editing/adding to the CSS and then I was totally confused... EVERYTHING was skewed around, order was absent, -nothing made any sence.
I have since spent hours trying to re-write the CSS to a more (imo) logical tree mad: You think I'd have learned (I wrote about this once before: )... I had used a 'html shrink' product once on a trial useage... saved 50% of file size... but it effectively stripped out ALL white spaces in the code, all doube-quotes, all carriage returns... :( I spent a week re-ding the entire site, trying to get it 'readable' (and therefore, editable) again...

[Fang]

And following on from what felgall said, rather than starting my css with body declaration, I start off with the more general * {border:0; margin:0; padding:0;}Actually, I guess that I do that too.Don't do this; it slows the parsing of the CSS, only add rules that are necessary.
Another slow-mo is:element#someID {foo:bar;}
An ID is unique, just the ID as selector is sufficient:#someID {foo:bar;}

[felgall]

body {margin:0; padding:0;}

is usually sufficient to fix the major differences in the overall page layout. Removing the margins and padding from all the other elements (which are mostly the same between browsers in any case) just means that you need to add extra CSS to put them back.

I never could understand why anyone would put anything in front of the # in an id selector entry since they are guaranteed to be unique anyway.

[slaughters]

Don't do this; it slows the parsing of the CSS, only add rules that are necessary...By how much? Frankly I care less over 0.0000001 second slow downs, but I start caring about 1 second and over slow downs.

Not everything has to be optimal - you just need to optimize when to be optimal.

...I never could understand why anyone would put anything in front of the # in an id selector entry since they are guaranteed to be unique anyway...Doesn't this force the scope to be lmited to just the element? Could be useful on nested sub lists.

[Fang]

By how much? Frankly I care less over 0.0000001 second slow downs, but I start caring about 1 second and over slow downs.
Not everything has to be optimal - you just need to optimize when to be optimal. When you apply the universal selector to margin, border and padding, think what happens to lists and form elements. These elements, in particular, will have to have another rule applied to correct their appearance. More time required for parsing the CSS and the possibility of conflicts and errors in the CSS.


Doesn't this force the scope to be lmited to just the element? Could be useful on nested sub lists.Specifying a tag name on a ID selector is only useful if the ID is applied to different elements on different documents. In 99% of cases it is used incorrectly.

[Centauri]

When you apply the universal selector to margin, border and padding, think what happens to lists and form elements. These elements, in particular, will have to have another rule applied to correct their appearance. More time required for parsing the CSS and the possibility of conflicts and errors in the CSS.

These mentioned elements will most likely need to have rules to "correct" their appearance anyway due to mainly the differences in IE's defaults. At least when everything is zeroed first, you know where you stand - otherwise trying to identify just which property of which element is different and causing your layout problems can be very difficult. I LIKE to know that I have to set the rules for everything.

Cheers
Graeme

[WebJoel]

Maybe the CSS will be 'bigger' due to use of universal selectors and subsequant need to define all padding & margins thereafter, -but you know what? -Make the resultant CSS be 'external' so it can be re-used on linked pages, optimize an image or three, use vaild code throughout the document(s) and almost assuredly, the download time/bandwidth useage will be reduced, and the peace-of-mind when checked and found to work 'similarly' upon several major browsers. That is what I beleive. :) Nothing can possibly be wrong with that. :D

[GSZX1337]

... and I generally tend to do it in an alphabetical order, not sure why thought, I guess it's just one of my obsessions, lol.


tayiper
I put my selectors in order of how often I will edit them. I put the body first, not 'cause I edit it alot, but because that's the first thing I type down. Then, I order it like this: headings, paragraphs, tables, so on and so forth.