Line-up Vendor Prefixed Property Values Make your CSS easier to scan and edit

Making code easier to read is a useful thing. I often make a point of lining up assignment operators or array values in PHP as I find it far easier to scan. I’ve now got a tip for doing something similar in CSS.

When doing a Genesis child theme audit for a client recently, I came across the following CSS ruleset:

.selector {
	-moz-box-shadow: 0 0 1px 1px #eee inset;
	-webkit-box-shadow: 0 0 1px 1px#eee inset;
	border: 1px solid #ddd;
	box-shadow: 0 0 1px 1px #eee inset;
	color: #ccc;
}

The standard adopted for CSS at StudioPress is simply to have all properties in alphabetical order – no exceptions. It’s slightly different from the WordPress Coding Standards for CSS, but it’s also far easier to remember and not so ambiguous. From that, I’d previously suggested to this and other clients that vendor prefixed properties should also be alphabetical, and therefore separated from the standard properties, by being at the top.

This does make it trickier to read and as such, it isn’t easy to spot the missing space on that webkit prefixed property value. Go on, admit it, you didn’t spot it either

I recently read a short post from someone (I’m really sorry, I didn’t take note of who it was) that said that they prefer to line up the colon on vendor-prefixed and standard properties, which makes it easier to read. They would have lined up the following (still otherwise keeping rules in alphabetical order) like so (with the missing space added back in):

.selector {
	border: 1px solid #ddd;
	-webkit-box-shadow: 0 0 1px 1px #eee inset;
	   -moz-box-shadow: 0 0 1px 1px #eee inset;
	        box-shadow: 0 0 1px 1px #eee inset;
	color: #ccc;
}

That is much easier to read, easier to visually scan that it’s consistent across the property variations, and allows text editors that can edit vertically to amend all of the values consistently in one go.

Another variation, and now my currently preferred format, is to line-up the start of the values:

.selector {
	border: 1px solid #ddd;
	-webkit-box-shadow: 0 0 1px 1px #eee inset;
	-moz-box-shadow:    0 0 1px 1px #eee inset;
	box-shadow:         0 0 1px 1px #eee inset;
	color: #ccc;
}

This means that only tabs (or a consistent number of spaces) are used at the start of the line, and extra spaces are added into the middle of the line; this is fine, since some particularly long values may be wrapped onto new lines anyway (exact details of which are outside the scope of this discussion).

Why not give this alignment a go, and tell me how you get on?