Which example would you think is faster to find the margin-right property?
Example 1
print?
- 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
- 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.