#header {
background:url(../images/header.png) no-repeat;

padding: 1px 0;
margin: 0 auto;

width: 200px;
height: 80px;
}

(In case the formatting doesn’t take: What I describe is that things like padding/margin or width/height are grouped in a logical fashion. May include spacing between logical groups.)

This way, things that are often tweaked in relation to each-other are closer together, and things that are related to each-other are easier to find.

And yes, of course this is all in development.
And no, a few bytes are not going to add a tremendous amount of server overhead (at least on smaller applications — always keep your project in mind, because things will always be different depending on the project).

Happy coding!

Of course when you go live it is another matter.

A production stylesheet should be minified, but there’s no need for this to affect your development files. You can even separate your styles across multiple stylesheets for convenience, and compile them into one big stylesheet for production.

Alphabetical ordering of properties does seem a bit OCD, but whatever floats your boat.

Tip #2 I agree alpha is overkill – Plus most editors have “find” .

Tip #3 This is just wasting space. Not enough lines on too many stylesheets for this to be useful.

Too much squeeze

And I agree with what almost everyone in their comments (including myself) said: organising CSS attributes in alphabetical order is just overkill.. there are only 6 tiny lines of code to read per element, how long does it really take to scan to the list? Personally it takes just as long either way for me.

What I do, is use a vaguely consistant structure that makes sense to me: width, height, and float are always the first things to be defined, and border + background are always the last. These are the parts of code that I edit most frequently, so I’ll always know where to find them, everything else just sits in between.

If anyone was to do this in production, they would cause an unwanted amount of server overhead when trying to serve files, increase load times and bandwidth usage. For production you should minify you css. Remove all comments and whitespace. CSS functions exactly the same without whitespace. I recommend using a tool such as http://javascriptcompressor.com to compress JS and CSS.

Why would you want your code readable to the outside world anyway? It’s not like comments help the browser understand what’s going on.

Either pay no attention to this article, or get the author to add “FOR DEVELOPMENT PURPOSES ONLY” on the first line.

Kind regards
Ashley

but doesn’t this makes the template loading increase?