Organize CSS Properties Alphabetically

Which example would you think is faster to find the margin-right property?

Example 1

print?

1. div#header h1 {
2. z-index: 101;
3. color: #000;
4. position: relative;
5. line-height: 24px;
6. margin-right: 48px;
7. border-bottom: 1px solid #dedede;
8. font-size: 18px;
9. }

div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}

Example 2

print?

1. div#header h1 {
2. border-bottom: 1px solid #dedede;
3. color: #000;
4. font-size: 18px;
5. line-height: 24px;
6. margin-right: 48px;
7. position: relative;
8. z-index: 101;
9. }

div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}

You can’t tell me that Example 2 isn’t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.

I know some people who organize one way and others who organize another, but at my company, we made a consensus decision to all organize alphabetically. It has definitely helped when working with other people’s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.