Something many developers are guilty of is not commenting their code. I’m guilty of it, you’re guilty of it, your favorite rockstar programmer is guilty of it. You can’t go back and fix this, often enough – your CSS files are probably incomprehensible to you by now. Mine usually are. So how do you fix this going forward?

Comment “Headers”

The biggest help, for me personally, is to use comments to create sections in my CSS files. I use three-line comments as “headers” – specific sections that are usually surrounded by a container div, such as the header, or sidebar. I use one-line comments as separators for specific things I might look for often enough in the code but are single items. Like this:

/*------------------------------------*\
    HEADER
\*------------------------------------*/

.banner {
    background: url('images/banner.png') repeat 0 0 transparent;
    width: 100%;
    position: relative;
}

/*LOGO--------------------------------*/
.banner h1 a {
    background: url('images/logo.png') no-repeat 0 0 transparent;
    background-size: 100%;
    display: block;
    height: 88px;
    max-width: 407px;
    width: 100%;
}

This not only helps me find exactly what I’m looking to change or fix, but forces me to organize my CSS.

Mystery Fixes

Now, sometimes you have something that just shouldn’t work, and yet it does. You shouldn’t have to deal with that if you’re writing your own code from scratch, but if you have to deal with a company’s bloated existing stuff, you have to work with what you have.

When you make a “Mystery Fix” or do something that could break the design of the page later on, don’t make the same mistake your predecessor did, document it.

.page-id-16 #content .post-box > h1 { /*This page needs to have the title removed*/
        display: none;
}

If it’s more complex than the above, document why the fix works.