27 replies [Last post]
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

that is how I write my css. Each rule has it's own line. I find that easier because I dont have to scroll down to make adjustments, its all "above the fold".

[ tony: moved from another thread http://csscreator.com/node/34996 ]

Tags:
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CupidsToejam wrote:that is

CupidsToejam wrote:

that is how I write my css. Each rule has it's own line. I find that easier because I dont have to scroll down to make adjustments, its all "above the fold".

Do keep in mind that you're in a minority. Most people have difficulty scanning horizontally as opposed to vertically.

Code, including that of a declarative language like css, should be organized and formatted for easy maintenance. For css that means the selectors are grouped contextually, and sub-grouped by order or relationships. Rulesets should then be indented some sane amount so a scan down the source will easily catch each selector.

Always write as if the next guy to work on your code is a violent psychotic who knows where you live.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

gary.turner wrote: Code,

gary.turner wrote:

Code, including that of a declarative language like css, should be organized and formatted for easy maintenance. For css that means the selectors are grouped contextually, and sub-grouped by order or relationships. Rulesets should then be indented some sane amount so a scan down the source will easily catch each selector.
gary

Dont get me wrong, my code is very formatted. I break it all up into four categories so its very easy to edit and find what you want. Look at my css here, and tell me its not organized and easy to follow. You mention catching the selector. [b]selector {property: value}, this is how i write it. Catching the selectors is quite easy since it is the very first sequence of characters on the line. Sure, sometime the lines get long and wraps to the next, but this dosnt happen often. I appreciate your opinion, but there are no rules to formatting css.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Gary responded as I was

Gary responded as I was going to but decided against for fear of dragging the thread of it's topic. Cupid you are right there are no rules as such yet it is extremely common to format the way Gary has described and as such forms part of a best practise guidelines if you like. We have always advocated such approaches for good reason as there needs to be some discipline adhered to in this simple declarative language - as there should in any language - the following of this sort of [practise does make it a lot easier for others to follow such as ourselves on the forum staring at and trying to decipher others code.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

thank you Hugo

thank you Hugo

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

CupidsToejam wrote:Dont get

CupidsToejam wrote:

Dont get me wrong, my code is very formatted. I break it all up into four categories so its very easy to edit and find what you want. Look at my css , and tell me its not organized and easy to follow.

You asked for it. Smile It's neither well organized nor easy to follow. To work with a given element, you find its rules all over the place. For example, body div#content, ol#steps, ul#stuff, etc. are found in multiple locations in the stylesheet. This is an opportunity for error and a cause of extra maintenance/debugging effort. There is, in programming, the SPOT principle, the Single Point Of Truth. That is, no piece of data should be stored in more than one place. This is alternatively called the DRY, Don't Repeat Yourself, principle.

Quote:

Catching the selectors is quite easy since it is the very first sequence of characters on the line. Sure, sometime the lines get long and wraps to the next, but this dosnt happen often. I appreciate your opinion, but there are no rules to formatting css.

True about the selectors being catchable, but then you must scan horizontally. The human eye does not do that well. Listing the properties vertically under the selector with an indent is the more naturally readable method. Compare:

UL#friends { float: left; margin: 20px 0 0 5px; width: 231px; }
UL#friends2 { float: right; margin: 20px 5px 0 0; width: 231px; }
UL#friends li, UL#friends2 li { margin: 10px 0; }
----------------
UL#friends { 
  float: left; 
  margin: 20px 0 0 5px; 
  width: 231px; 
  }
 
UL#friends2 { 
  float: right; 
  margin: 20px 5px 0 0; 
  width: 231px; 
  }
 
UL#friends li, 
UL#friends2 li { 
  margin: 10px 0; 
  }
You are quite right; there are no hard and fast formatting rules. Do as you think best for yourself. The format I describe is time tested across many web authors, and has been found to be at least a better practice, if not best practice. The benefits become glaringly obvious when you have to maintain or debug someone else's code.

We now return you to your regular prog topic.

//edit: I really should refresh a topic after it's been sitting for a while. It makes my comment appear redundant. :sigh: Smile

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I'm with Hugo and Gary on

I'm with Hugo and Gary on this. The acid test isn't in looking at your CSS code but in taking a look at other peoples' css. You have a leg up on your own code as you are familiar with its organisation. By looking at other peoples code you'll work out what layouts are easier to examine when you don't know their organisation. A code layout that is quickly examined and understood by a stranger is a better code layout.

Personally, I wouldn't want to come across CSS formatted the way you've done yours.

I've learned that CSS is awkward to structure because its not really suited to a list. Its sensible to group styles within the elements/selectors that use them but its also sensible to group similar properties (e.g. colours).

For me, I try to:
- structure the rules from general to specific and to follow the structure of the html. That is a generic h1 rule will be near the top, #banner will come before #footer.
- generally include all the properties for an element with a single rule for that element
- place one selector per line,
- place one property per line indented by 2 or 4 spaces,
- list the properties in alphabetical order
- use shortcut properties

E.g.

#sidebar .menu,
#footer .menu {
  font-weight: bold;
  list-style: none;
  margin: 0 2px;
}

I deviate from those guidelines sometimes:
- grouping colour rules together and grouping font rules together and clearly comment this
- placing several selectors on one line for the resetting rules at the top of the stylesheet
- placing selector + properties on one line when there are several very similar rules, e.g. a list of ids which have different background property values but otherwise common styles.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 30 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

Chris wrote:- list the

Chris wrote:

- list the properties in alphabetical order

Shock

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

If you put the style

If you put the style properties in alpha order, you're far less likely to duplicate a property because you didn't recognise it with a quick glance.

Once you start editing other peoples' stylesheets, you'll surprise yourself how often you come across contradictory properties in the same rule.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 30 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

With all the code I've read

With all the code I've read here I've never realised when I was reading an alphabetical list! I suppose it does make sense Smile

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It's a little thing, but it

It's a little thing, but it helps you to avoid duplications and omissions. I half-heartedly alphabetize as I go; I'm not anal about it, but the more I work on a stylesheet, the more perfectly the properties become alphabetized.

When debugging someone else's css, that's the second thing I do after reformatting for easy readability. It's not much investment for so much return.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Smee
Smee's picture
Offline
Elder
Adelaide, Oz
Last seen: 4 years 30 weeks ago
Adelaide, Oz
Timezone: GMT+9.5
Joined: 2007-06-10
Posts: 1596
Points: 340

I sort of have a method of

I sort of have a method of position, colour, text, margins, padding, display. I think it's somehow based on the frequency of the things I change - they're nearer the top, the bottom bits stay pretty static (usually). Ummm...I'm mentally rearranging that list and I hate to disappoint you lot, but I don't think I I'm going to change it soon.

Mods and gurus – THANK YOU!
For your time, knowledge and experience so willingly and generously given.
Please come back tomorrow and sort us all out again Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

The alpha approach to

The alpha approach to properties is interesting and tbh not one I had considered. I have always held to a belief that an element or rulesets possible properties have somewhat of a natural hierarchy or level of superiority and effect on an element and tend to describe properties in that order that I have perceived, not sure where I got that from but have always followed this structure - more or less.

Given a selector that tells me little about an element i.e #someName{} or even p {}

I tend to lay out thus:

#someName {
  position:; / float:;
  display:;
  width:;
  height:;
  border:;
  font:;
  color:;
  background:;
  }

Give or take.

I tend to like to see the box model properties initially then lesser properties such as font, color, backgrounds etc it's partly to do with being able to scan a ruleset and mentally construct what that element looks like, I'll envisage the elements position/placement, dimensions then it's lesser properties such as color/background.

One thing thing that I think ought to stated or that can be stated fairly emphatically when describing an approach to a stylesheet layout and given that we except that there are no real hard rules, is that:

- As the DOM flows top to bottom so does your stylesheet, so do not under any circumstances start jumping around a stylesheet keeps it's basic flow similar to the html document flow

- keep in mind a sense of logical grouping, don't care too much how it's done, I can fairly quickly latch on to someone's own take on this what I can't do is latch on to no sense of order

- in grouping rules it makes sense to keep certain hierarchies together, i.e rulesets that govern the main framework of the page are best kept together, often when needing to adjust the main layout elements one has to adjust them in tandem so to need to widen the sidebar necessitating increasing the content margin is a pain to do if the two elements are in widely differing positions, as well as being much harder to understand how a framework works if #wrapper, ##sidebar, #content, #footer are spread out throughout the sheet, together at a glance I can read and construct a mental visual view of the layout.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

I used to use a structure to

I used to use a structure to properties, e.g. group offsets near position. In the end because the order was in my mind, that structure tended to morph over time. I guess I could have written it down and stuck to it, but in the end it seemed more sensible just to order things alphabetically. Its really easy to do. Its really quick to pick up that properties are ordered that way. I'm not obsessive about it, ie. I don't edit someone elses stylesheet into order.

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

I do what Hugo does, at

I do what Hugo does, at least with my more recent sites:
#element {
clear; (because it's the first thing it does in my mind)
position;
width;
height;
margin;
padding;
text junk including line-height and color;
white-space;
background;
border;
}

Trying to alphabetically sort it would make no sense for me. I can't even do it correctly : )

Cupid, what I don't understand is why you write your CSS sideways but your HTML vertically. Why not:

<div><h3>Yer Welcome</h3><p>Herr at Redneck landscapen, we doo all sorts of stuff to your yard. We have good folks worken for us that know how to cut grass good. We do things like cut grass, pull'em weeds, and other landscapen stuff. If you look over there to tha other side, you see int-r net photographs of stuff we done.</p>
<h3>Having us do stuff forya is easy!</h3><ol id="steps"><li id="one"><span>Jus call RED-NECK</span></li><li id="two"><span>We pick up ther phone</span></li><li id="three"><span>You tell us what you need'en done</span></li><li id="four"><span>We come out and do it</span></li><li id="five"><span>Ya pay us</span></li></ol></div>
<ul id="right"><li><img src="images/s1.jpg" alt="Golf course" /></li><li><img src="images/s2.jpg" alt="National park"<li><img src="images/s5.jpg" alt="The boys" /></li></ul></div>
</div></body></html>

The newlines would make more sense if I'd shown the whole document instead of just the lower half, but even though it makes sense, it's hard to read. I will no longer debug CSS squished together in one long line by one of those goofy Tidy programs anymore.
I can't read vertical text (like cjk-style), I can't read ee cummings, and I can't read CSS squished in a line, without straining my brain. I can't read HTML written like that either-- the googles are also unreadable.

Newbs who do this often repeat properties in the same line and never see it. Though they also don't have a system of listing properties (alphabetical or whatever).

So, write how you want, but don't even give it to someone else : ) I know someone who takes everyone's code and stuff it into Dreamweaver just so it formats to his reading style. Dayum, but Ah luv dat der site : ) It shor is funnee.

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

I think there may be some

I think there may be some confusion as to how I write my css. So i've decided to post a screenshot of how I do. Ive worked with the most common way to format css. I found myself spending alot of time scrolling. So I trained myself to read and write it as illustrated below. It works better for me than the traditional structure. I have it separated out into sections to make editing very easy and simple. I dont have to search through many lines of properties to find what I need. If i want to change type color, its in the typography area. This way of breaking everything up, to me, is better organized and easier to manage. Like I said before, I've done the traditional way, and it didnt work for me. You guys are dissing my structure without even trying it first.

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

CupidsToejam wrote:You guys

CupidsToejam wrote:

You guys are dissing my structure without even trying it first.

I'm sorry if it comes across that way. I think we're discussing different ways of organizing CSS code, please don't take it personally if we don't agree with your way, each is entitled to his own. As you say, you find advantages in your organization over other ways that you've tried and it works for you.

Also you shouldn't assume what we have and haven't tried. My own CSS code structure has evolved over time. When I first started writing code, I did structure the CSS much more horizontally than I do now. I found reasons to change, I think the method I use now is an improvement - it works better for me.

Personally I think threads like this are important. Its a rare forum (which CSS Creator is) where an issue like this - which is mired in personal preference(1) - can be discussed in a reasoned way with individuals describing their own choices and the reasons behind them. If someone interested in learning how to structure their CSS code was to read this thread, they would see a number of different methods described and some of the reasons behind the choices along with other peoples' views on those choices and could make their own informed decision.

(1) There are no [insert point of view] tyrants here who feel the need to force their own point of view down the throats of others or who resort to personal abuse when someone disagrees with their cherished beliefs (except, of course, with respect of tables and non-tabular content).

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 48 weeks 11 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

I will often put more than

I will often put more than one rule on a line, but I still keep the lines short so they don't exceed page width. Also I only do it with rules that are naturally grouped together in my mind, so I may put padding and margin on one line together and foreground and background colors on one line.

But the over-riding consideration is always, to me, readibility. I also indent each rule line below the selector so it stands out as a rule. Something like

selector
  {
    rule; rule;
    rule;
  }

I also leave the semicolon on the last rule even though it is not necessary. Also I generally place selectors in a heirarchy starting from the most to least general, although sometimes I will follow the order of appearance in the html instead.

I make no claims as to whether this is the "best" or "right" way to do things, however.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:You guys are dissing

Quote:

You guys are dissing my structure without even trying it first.

No we're not actually cupid, don't assume the post is any longer directly about you and your methods, you sparked an interesting thread that is sourly lacking at the moment on this forum and which used to happen far more frequently in the past, there has to be the occasional post that rises above "my background doesn't show"

As for your approach I'll re-iterate you are free to do as you please and there are no absolute rules in this regard but bear in mind some of the opinions expressed are those of people with a fair bit of experience behind them.

I have seen formatting similar to yours in the past and had to try and debug it it was a tad more complex, controlling a sophisticated menu, the issues it had were next to impossible to work through due to the rules layout, making it very difficult to mentally parse the properties to get an idea of what was happening where and how.

Chris makes the argument for this thread very well and clearly was right to award himself the 'Best Post' badge Tongue

btw Cupid no one has 'Bell Gothic Std Light' on their system, do they? and where's your generic font face? Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

Hugo wrote: btw Cupid no one

Hugo wrote:

btw Cupid no one has 'Bell Gothic Std Light' on their system, do they? and where's your generic font face? Smile

Nobodies perfect Shock
It'll just default to arial

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 9 years 17 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

Hugo wrote:Chris makes the

Hugo wrote:

Chris makes the argument for this thread very well and clearly was right to award himself the 'Best Post' badge Tongue

Did I do that? I didn't think you could choose your own reply.

:bigoops:

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

no good feigning innocence

no good feigning innocence Laughing out loud

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Quote:It'll just default to

Quote:

It'll just default to arial

But you must declare a generic font it's the law! last one must be either 'serif' or 'sans-serif'

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 46 weeks 1 day ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

Hugo wrote:CT wrote:It'll

CT wrote:

It'll just default to arial

Not if you haven't installed MSFT's Truetype core fonts. Not everyone limps along on that legacy OS. The following are MSFT copyrighted font faces, which MSFT 'generously' allowed you to install on your non-Windows platform under a limited license. The license has been rescinded, and new installs must be made from copies published under the old license.

   Comic Sans MS (Bold)
   Courier New (Bold, Italic, Bold Italic)
   Georgia (Bold, Italic, Bold Italic)
   Impact
   Times New Roman (Bold, Italic, Bold Italic)
   Trebuchet (Bold, Italic, Bold Italic)
   Verdana (Bold, Italic, Bold Italic)
   Webdings

Hugo wrote:

But you must declare a generic font it's the law! last one must be either 'serif' or 'sans-serif'

We-ell, it's not quite the law, but it's strongly encouraged. The generic families are serif, sans-serif, cursive, fantasy, and monospace.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 1 week ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

No it must be the law!

No it must be the law! 'strongly encouraged' is a waste of time too wish washy it's like 'reccomdenation' no use to man or beast, we need rules, law, order. The W3C needs to adopt a more totalitarian approach Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Stomme poes
Stomme poes's picture
Offline
Elder
Netherlands
Last seen: 10 years 12 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2008-02-04
Posts: 1854
Points: 378

Hugo wrote:The W3C needs to

Hugo wrote:

The W3C needs to adopt a more totalitarian approach

Absolutely. I want to see the jack-booted Polizi of the Web Standards Evangelical Movement on the streets yesterday. : ) I do wish it was stronger than "4 out of 5 web standards zealots recommend..." That's like 4 out of 5 dentists recommend Colgate. I still don't brush with Colgate. Bleh.

Cupid wrote:

I found myself spending alot of time scrolling.

Don't you scroll anyway (side to side)?
I have a 17" screen, and scroll no matter what (fortunately I has word wrapping in my editors tho). And most of my stylesheets are pretty long, a few printed pages at least for the bigger sites.
I see that you do have a system of listing properties, so you wouldn't accidentally list width twice by accident.

I'd also get lost if types of CSS is grouped separately... probably why I get lost in templates, it seems to be what they do too. I understand how it helps some people, but I think in terms of elementst. I never think, "I'm changing colours" or "I'm changing fonts". I think, "I'm changing headers", "I'm changing forms", "I'm changing the menu". This makes ctrl-f my most-used keystroke. I know my h1 is only listed in once place, usually, including the hacks if any.

I have started writing my IE6 hacks in a single long line lately. It seems to make it stick out from the rest of the code.
element {
blah
blah
blah
blah
}
* html element {blah blah blah blah blah blah;}

next element {
blah
}

I'm no expert, but I fake one on teh Internets

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 19 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

no, i do not have to scroll

no, i do not have to scroll side-to-side. my rules dont get very long, and if they do, it wraps.

Titan793
Offline
Enthusiast
Syracuse, NY
Last seen: 11 years 9 weeks ago
Syracuse, NY
Timezone: GMT-5
Joined: 2009-02-20
Posts: 285
Points: 5

First, I have nothing at all

First, I have nothing at all against Cupid's way of doing things. I've always been of the "if it works best for you, then use it" mentality!

This is a good thread though, and nice to see that people do actually discuss things on this forum, and don't only answer questions all day long!

With that said, as I've progressed, my CSS has evolved into a structure that is laid out in pretty much the same order as my HTML.. and each entry is usually laid out in a set structure similar to what Chris posted.

I structure everything on new lines, however anything with css for multiple elements, I will list the elements inline.

So (borrowing a previous example).. this:

UL#friends li, 
UL#friends2 li { 
  margin: 10px 0; 
  }

Would be this:
UL#friends li, UL#friends2 li { 
     margin: 10px 0; 
}

Otherwise, I don't use any inline code on mine.

As far as the layout, a stylesheet for a standard page with a header, horizontal navigation, left column, right column, and a footer, would look something like:

/* Setup for the html, & body */
- zero margins
- body background, font setup
- etc
 
/* Setup that carries through every page section */
- remove image borders
- setup general link colors
- clearfix code
- etc
 
/* Setup For The Header */
- CSS here for all elements in this section
 
/* Setup For The Navigation */
- CSS here for all elements in this section
 
/* Setup For The Left Column */
- CSS here for all elements in this section
 
/* Setup For The Right Column */
- CSS here for all elements in this section
 
/* Setup For The Footer */
- CSS here for all elements in this section

I prefer this structure over alphabetizing, because if I see an issue in the right column, I can quickly find the section with that CSS. As I'm scrolling through, if I see stuff for my #navigation, I know that I need to keep going.. if I see stuff for my #footer, I know I went too far.

This also keeps me from duplicating things, as I'm always working inside one specific section, and know that I didn't throw random code in other areas of my stylesheet.