Poll Results: How do you order your CSS properties?

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Over 10,000 people have spoken: the most popular way to order CSS properties is grouped by type.

This is how the votes broke down:

Grouped by type (45%) was fairly closely followed up by Randomly (39%). Much less popular was Alphabetic (14%) and only a few folks using Line length (2%).

For the record, Grouped by type would be like this (heavily borrowed from Nicolas Gallagher’s Idiomatic CSS):

.selector {
  /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

  /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

  /* Color */
  background: #000;
  color: #fff
  /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

  /* Other */
  cursor: pointer;

It probably wouldn’t be specifically labeled with comments like that, but the properties would be next to each other.

The majority of folks are more organized than me! I regrettably had to vote “Randomly (no specific plan)”. I don’t feel like it hampers me that much, but then again, how would I know if I don’t try out a more organized approach?

I have a few other thoughts.

I think this is a bigger deal in teams. There has to be a standard otherwise the CSS project-wide looks sloppy. I know that inconsistent styles would wear on my conscience and I’d spend time fixing trivial formatting stuff rather than doing actual work.

Cognitive load factors into this. If you can always count on certain properties being in the same place, you can understand the CSS a bit faster (less scanning). Again, a bigger deal when on a team and you are looking at code you are slightly less familiar with because you didn’t write it.

Another consideration is “as you originally write it” CSS and “after a few months” CSS. I bet a lot of us start out with the intention to be very organized and actually do start organized, but then as you tweak things later, toss properties wherever. So then how did that affect the vote? Did you vote based on your intentions or your actual CSS files?