How do you arrange your css declarations?

[Wuhtzu]

Hey

 

I have a poll-like question I want to ask all of you who use css:

 

How do you arrange your css declarations within your declaration-blocks?

 

To show you what I mean and which two methods / schemes constantly battle in my css authoring:

 

#2: Dimensional properties first, then positional properties and last background, color ect.

.someclass {
  width: 600px;
  height: 200px;
  margin: 10px auto 10px auto;
  padding: 10px;
  float: left;
  background: #00000;
  color: #FFFFFF;
  }

 

#2: Properties arranged alphabetically

.someclass {
  background: #00000;
  color: #FFFFFF;
  float: left;
  height: 200px;
  margin: 10px auto 10px auto;
  padding: 10px;
  width: 600px;
  }

 

I'm sure many more philosophies exist and I'm keen to hear about them, but if you use either #1 or #2 I would like to hear that too - that's the poll part of the question

 

Best regards

Wuhtzu

[bronzemonkey]

At the moment I use something a bit like the first one. The alphabetical listing never really gelled with my way of thinking.

 

position properties

display properties

dimension properties (from inside out)

font properties

etc.

 

#myelement {
clear:both;
position:relative;
left:0;
top:0;
float:left;
display:block;
width:auto;
height:auto;
padding:0;
border:0;
margin:0;
overflow:hidden;
font-size:1em;
font-family:Arial, sans-serif;
line-height:1.5em;
text-align:left;
text-transform:uppercase;
color:#000;
background:#fff;
}

[duclet]

I am more of an alphabetic person. When I need to find something, I don't want to waste time searching the entire list. Organize it now for a better tomorrow.

[wazzoinc]

target {

      Lump properties like background, border, font, etc.

      Any variations to lump properties (border-left, padding-left, etc.)

      Any random edits necessary to make it look like what I want it to look like

      }

 

I guess I have a bit of a hierarchy thing going on. My organization really lies in the Andy Clarke philosophy of CSS organization:

3 files: typography.css, layout.css and colors.css; typography covers all font properties, layout covers the layout and normalizing code, and colors covers background colors and images.

All these files are @import'd into an embedded stylesheet on a page.

This eliminates the need to shuffle through a lot of lines of code just to change a text-size.

[Daniel0]

I sort them alphabetically.