Learn Development at Frontend Masters
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?
I don’t know, man… I just think going alphabet is a lot easier to maintain (for me). Plus, firebug for FF alphabetizes and I copy and paste a lot when I’m designing/tweaking in the browser.
Not just for you, but also for big teams. Alphabetical order is the simplest way to minimize time lost searching for properties as everything sits in a recognizable order, and team members don’t have to learn (and remember) a ‘grouped by type’ based order.
Very interesting subject Chris. I personally am part of the 2% who group the properties by line length. Not only using this method gets you a smaller css file on disk, but I also find it faster to identify styles and to navigate inside the stylesheet when making edits after a period of time, because it saves you a lot of scrolling.
I ask you, how many times did you manage1000 lines stylesheets formatted using grouped by type method.
Wouldn’t it have been better to only manage 300 lines of code instead?
How does grouping properties by line length give you fewer lines and take up less disk space? I would think
takes up the same space as
Jamie, I believe that Andru is actually referring to this:
I am of the belief that having to scan both horizontally and vertically will decrease efficiency, and if you are minimizing your code when publishing then it won’t matter how many lines you take up when writing it.
With cmd + f it shouldn’t matter and as Josh says, looking both horizontally and vertically will decrease rather than speed up, I know whenever I create an HTML Email it takes the piss looking for all the inline styles.
In addition, it shouldn’t matter how spaced out your code is because for the live site you should be optimizing anyhow.
Jamie,
Josh is correct about the way I format my css. The thingy rule that you wrote takes you 19 lines of code (assuming you leave one empty line between each property), while for me it takes 1 or max 2 rows depending on screen width.
For me is much easier to follow a code formatted this way, as I don’t have to scroll at all while editing the rule. I also have to visually scan a far much smaller area to identify the parts I need to change, but this is a personal preference.
Each coder writes his css in a different manner according to his own style, so I believe that there isn’t a best way to do it. It’s more important what code you write than how you format it.