Skip to main content

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.

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments

0
Would love your thoughts, please comment.x
()
x
×

Hello!

താഴെ കാണുന്ന വാട്സാപ്പ് ഐക്കൺ ക്ലിക്ക് ചെയ്യുകയോ ഈ മെയിൽ ഐഡിയിലേക്ക് മെയിൽ അയക്കുകയോ ചെയ്യുക.

രാജേഷ് ഒടയഞ്ചാൽ

×
Verified by MonsterInsights