Previous Message
Next Message

rules: does attribute sequence matter ???

Sent by Zoe M. Gillenwater on 10 August 2004 13:01


Michael D Schleif wrote:

>OK, call me anal; but, I find usage such as this:
>
>	h1 {margin: 0; padding: 1em 0.25em 0; color: rgb(45%,57%,26%);
>	  background: #CC9 url(css-d-bg-tan.jpg) 0 0 no-repeat;
>	  text-align: right; font: bold 220% Arial, Helvetica, sans-serif;
>	  line-height: 0.8em; letter-spacing: 0.1em;}
>
>And the first thing that I do is this:
>
>	h1 {
>		background: #cc9 url(css-d-bg-tan.jpg) 0 0 no-repeat;
>		color: rgb(45%,57%,26%);
>		font: bold 220% Arial, Helvetica, sans-serif;
>		letter-spacing: 0.1em;
>		line-height: 0.8em;
>		margin: 0;
>		padding: 1em 0.25em 0;
>		text-align: right;
>	}
>
>Now, I can visually see the entire scope of the rule, and adding and
>deleting from it is simply a matter of remembering my abc's ;>
>
>Frankly, I cannot fathom how you geniuses grok the first, especially
>during the initial reading.
>  
>

I don't "grok" it. :-)  I like to keep my attributes in a particular 
order as well, though I don't use alphabetical.

>Occasionally, I have quickly switched back and forth between two (2)
>rendered pages, differing only in those two (2) CSS rule formats, and I
>have detected small visual changes between them.
>
>[1] Therefore, I wonder, does the sequence of the attributes listed in a
>given rule matter?  Are there any conditions, even exceptions, under
>which this sequence matters?
>  
>

In general, no, it doesn't matter.  Sometimes it may.  For instance, if 
you're wanting to create a border around a div that is 5px wide on all 
sides except the top, which is 10px, you might write it like this:

div (
    border: 5px solid #000;
    border-top: 10px;
}

So in this case, order does matter.

>[2] Similarly, I try to order my rules alphabetically by name inside my
>external stylesheets.  Can the sequence of rules inside a stylesheet
>matter?
>  
>

Yes, the sequence of selectors in your style sheet matters a great 
deal.  Rules that are lower in the style sheet take precedence over 
rules that are higher.

If anyone cares to know, here's roughly how I organize things (always 
evolving of course):

Rules for body tag first.
Rules for main page sections next, in order that they appear on page 
(header, nav, content, footer).
Rules for text.
Rules for links.
Rules for lists.
Other global rules.
Page specific rules.
Within each rule, I order the attributes starting with positioning, 
floating, box model (margin, padding, background, border), text (color, 
font, line-height).

Arranging your attributes alphabetically is just fine though.  The 
important thing is to pick a method and stick with it (at least per 
project) so your files are easy to work with.

Zoe

-- 
Zoe M. Gillenwater
Design Specialist
Highway Safety Research Center
http://www.hsrc.unc.edu

______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Previous Message
Next Message

Message thread: