May 6, 2009 - Rajesh Odayanchal

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

  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.

complete css / css / css Principles

Leave a Reply

Your email address will not be published. Required fields are marked *