{"id":428,"date":"2009-05-06T05:43:00","date_gmt":"2009-05-06T05:43:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=428"},"modified":"2009-05-06T05:43:00","modified_gmt":"2009-05-06T05:43:00","slug":"organize-css-properties-alphabetically","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/organize-css-properties-alphabetically\/","title":{"rendered":"Organize CSS Properties Alphabetically"},"content":{"rendered":"

Which example would you think is faster to find the margin-right property<\/strong>?<\/p>\n

Example 1<\/h4>\n

print<\/a>?<\/a><\/h4>\n
\n
    \n
  1. div<\/span>#header<\/span> h1 { <\/span><\/span><\/li>\n
  2. z-index<\/span>: 101; <\/span><\/span><\/li>\n
  3. color<\/span>: <\/span>#000<\/span>; <\/span><\/span><\/li>\n
  4. position<\/span>: <\/span>relative<\/span>; <\/span><\/span><\/li>\n
  5. line-height<\/span>: <\/span>24px<\/span>; <\/span><\/span><\/li>\n
  6. margin-right<\/span>: <\/span>48px<\/span>; <\/span><\/span><\/li>\n
  7. border-bottom<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>#dedede<\/span>; <\/span><\/span><\/li>\n
  8. font-size<\/span>: <\/span>18px<\/span>; <\/span><\/span><\/li>\n
  9. } <\/span><\/li>\n<\/ol>\n<\/div>\n
    div#header h1 {
    z-index: 101;
    color: #000;
    position: relative;
    line-height: 24px;
    margin-right: 48px;
    border-bottom: 1px solid #dedede;
    font-size: 18px;
    }<\/pre>\n
    Example 2<\/h4>\n
    \n
    \n
    print<\/a>?<\/a><\/div>\n<\/div>\n
      \n
    1. div<\/span>#header<\/span> h1 {  <\/span><\/span><\/li>\n
    2.     border-bottom<\/span>: <\/span>1px<\/span> <\/span>solid<\/span> <\/span>#dedede<\/span>;  <\/span><\/span><\/li>\n
    3.     color<\/span>: <\/span>#000<\/span>;  <\/span><\/span><\/li>\n
    4.     font-size<\/span>: <\/span>18px<\/span>;  <\/span><\/span><\/li>\n
    5.     line-height<\/span>: <\/span>24px<\/span>;  <\/span><\/span><\/li>\n
    6.     margin-right<\/span>: <\/span>48px<\/span>;  <\/span><\/span><\/li>\n
    7.     position<\/span>: <\/span>relative<\/span>;  <\/span><\/span><\/li>\n
    8.     z-index<\/span>: 101;  <\/span><\/span><\/li>\n
    9. }  <\/span><\/li>\n<\/ol>\n<\/div>\n
      div#header h1 {
      border-bottom: 1px solid #dedede;
      color: #000;
      font-size: 18px;
      line-height: 24px;
      margin-right: 48px;
      position: relative;
      z-index: 101;
      }<\/pre>\n
      You can\u2019t tell me that Example 2 isn\u2019t faster. By alphabetizing your properties, you are creating this consistency that will help you reduce the time you spend searching for a specific property.<\/p>\n
      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\u2019s code. I cringe every time I go into a stylesheet where the properties are not sorted alphabetically.<\/p>\n","protected":false},"excerpt":{"rendered":"
      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; } 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? div#header h1 { border-bottom: 1px …<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,81,83],"tags":[],"class_list":["post-428","post","type-post","status-publish","format-standard","hentry","category-complete-css","category-css","category-css-principles"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6U","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/428","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=428"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/428\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=428"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=428"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=428"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}