A Quick Tip for Easier CSS Editing

A tip I picked up years ago, the source escapes me at this point in time, is alphabetize your CSS style properties. It makes it much easier to jump to the specific property later. Take the following 2 examples, and find the margin in each.

p {
    width: 75%;
    border: 1px solid #000;
    overflow: hidden;
    padding: 5px 10px;
    color: #000;
    background-color: #eee;
    background-image: none;
    margin: 10px 0;
    text-align: left;
    text-decoration: none;
    font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
}

p {
    background-color: #eee;
    background-image: none;
    border: 1px solid #000;
    color: #000; font-size: 14px;
    font-family: Helvetica, Arial, sans-serif;
    margin: 10px 0;
    overflow: hidden;
    padding: 5px 10px;
    text-align: left;
    text-decoration: none;
    width: 75%;
}

Hopefully, you can find the margin property faster in the second, alphabetized, list. It can take some time to get into the habit of doing so, but it is worth it. After a while, you may forget the benefits of alphabetizing your CSS properties, but you’ll quickly remember how valuable it is when editng another coder’s CSS that does not have alphabetized properties.