New Bookstore! Save 20% on books with discount code: LAUNCH
Web Dev + WordPress + Security

Obsessive CSS Code Formatting: Patterns and Trends

Call me strange, but I format each of my CSS rules according to the following structure/pattern:

div#example element {
	margin: 5px 15px 5px 0;
	border: 1px solid #444;
	line-height: 1.5em;
	text-align: center;
	background: #222;
	font-size: 10px;
	display: block;
	padding: 5px;
	color: #888;
	float: left;
	}
div#another div.example element {
	border: 1px solid #444;
	margin: 7px 0 17px 0;
	letter-spacing: 1px;
	font-weight: bold;
	background: #222;
	font-size: 1.1em;
	cursor: pointer;
	display: block;
	padding: 3px;
	width: 308px;
	color: #888;
	clear: left;
	float: left;
	}
div#another div.example element {
	text-indent: -9999px;
	overflow: hidden;
	position: fixed;
	display: block;
	z-index: 9999;
	padding: 0px;
	margin: 0px;
	bottom: 0px;
	right: 0px;
	}

Notice how the right-hand edge of each block suggests a diagonal line? This is accomplished by placing the longest declaration at the top of the style block, then the second-longest, and so on until the shortest rule is finally placed at the bottom. I have been writing my CSS this way for several years now, and apply the principle to virtually all of my declaration blocks. Occasionally, other formatting patterns are seen. For example, layout divisions are frequently very similar in appearance due to similar rules with similar lengths:

div.subleft {
	width: 400px;
	float: left;
	clear: none;
	}
div.subright {
	width: 377px;
	float: right;
	clear: none;
	}
div.midleft {
	width: 177px;
	float: left;
	clear: none;
	}
div.midright {
	width: 200px;
	float: right;
	clear: none;
	}

Technically, I am still listing the rules in descending order according to length, but the similarity of the rule blocks presents a uniform aesthetic demonstrating clear thought and solid design. Further, the overall pattern consisting of short, uniformly sized blocks is easily recognizable as related to positioning and layout. Over time, familiarity with the different patterns facilitates efficient CSS navigation. Further, the highly elaborate, systematic ordering of CSS rules conveys a sense of completeness and closure to finished files. Also, as the degree of organization closely correlates with overall processing time, determining inherent code quality is greatly facilitated while scanning through previously designed stylesheets.

Jeff Starr
About the Author
Jeff Starr = Creative thinker. Passionate about free and open Web.
Blackhole Pro: Trap bad bots in a virtual black hole.

28 responses to “Obsessive CSS Code Formatting: Patterns and Trends”

  1. Jamy Golden 2010/05/18 9:04 am

    I’m a bit late to this whole discussion! But I alphabetize, except I will always add ‘position, left, top’ at the end. However z-index trumps that, and vendor specific CSS trumps all. Sometimes I create an extra selector just to add the vendor specific CSS.
    Also, every property has it’s own line and it is never broken – This is why I have to have it in alphabetical order.

    I quite like your good looking CSS Jeff :) When I look at it I don’t feel like deleting it all just to see some white space lol.

  2. Daquan Wright 2010/07/03 7:51 am

    The only pattern in mine is alphabetical ordering, I just love doing my CSS like that. ^_^

    In terms of block patterns, I usually do top to bottom (example being wrapper > header > sidebar > footer > etc.)

  3. I’ve gotta agree with Jamy and Daquan (for the most part). Alphabetical is the way to go. If I had to come back at a later stage and go through this code, it would take me at least twice as long to find what selector I was looking for.

  4. I start with dimensional properties and code my CSS linear not vertical. (easier to identify selectors & consolidates lines)

    From there I group selectors by “Universally used” or “Unique” to a specific page.

    Within those groups I section in a heirarcheal fashion from top down (ex. #nav then #head)

Comments are closed for this post. Something to add? Let me know.
Welcome
Perishable Press is operated by Jeff Starr, a professional web developer and book author with two decades of experience. Here you will find posts about web development, WordPress, security, and more »
Digging Into WordPress: Take your WordPress skills to the next level.
Thoughts
Take a screenshot with Firefox (no extension required). Open Developer Tools Settings and enable the “Take a screenshot” button. Then click the button :)
Take a screenshot with Chrome (no extension required). Open DevTools, type Cmd + Shift + P, then type screenshot.
After 10 years working on my 2010 iMac, my upgrade finally arrived. Shiny new iMac shipped from Ireland :)
Too much caffeine weirds me out. But I love the taste of coffee. So once in a while I enjoy a small cup of decaf. Hits the spot.
Chris Coyier is a truly awesome person. One of the finest people I've ever worked with. Just #gottasayit
Excel won't open CSV file because SYLK format? Open it with text editor and add an apostrophe ' at the beginning of the file, save changes, done.
Displaying too many social media buttons and links all over the place imho makes you look desperate and frankly kinda sad.
Newsletter
Get news, updates, deals & tips via email.
Email kept private. Easy unsubscribe anytime.