Tip of the Day: CSS Formatting

One thing I really hate about agile front-end dev is the lack of formatting standards between devs. Some developers block their rules, others keep everything on one line. Some indent their rules, others don’t. The list goes on and on. I have a list of formatting rules that my team has adopted and all the front-end devs that I respect also follow, so if you care about improving your code and agile development, please adopt a standard of some sort and stand firm by it:

Block vs Single Line

Default to single line, because many rules will only contain one or two styles and its a waste and pain to scroll vertically through code. Most editors support the 80 column rule, so if your styles get longer than that, convert to block (easy to set a macro to do it for you in most IDE’s and editors).

.foo { background: #ccc; float: left; margin: 0 10px; }
 
.bar {
	cursor: pointer;
	display: block;
	float: left;
	height: 29px;
	margin: 7px 0;
	padding: 0 16.2%;
	width: 26px;
}

Indentation

It’s so much easier to read code that is indented to show hierarchy and white space that separates or groups similar or related objects together. This is a standard I see most front-end developers following, but if you’re not, smack yourself now and get with the program.

ul { }
	li { }
		li a { }
 
.foo {}
	.bar {}

That’s all on formatting for now. Adopt these standards and read on, because I’m sure I’ll be back on this rant before too long.