You know the story, you start to code, you start to add comments, but soon enough you get so sucked into it that you start to neglect adding more. We are all guilty of it once and a while. So what can we do about it?

How can we make our code more manageable?

Use Comments for better readability

Again when cluttered in between a lot of code, comments soon become well hidden little notes. You can help to combat this by making them stand out a little better.

Example

/* Using spaces at both ends punctuates the comment */

Rather than keeping important comments to a single line, try to add some white space around them;

Example

/*
This is a little better, isn't it?
*/

You can also jazz up larger blocks with more “/” if you want to, but try to use this for the more important headers, or sections of your code.

Example

/*/////////////////////////////////
 
Look how important this comment is!
 
/////////////////////////////////*/

You might want to use these large blocks at the start of your Css file to add your details, such as your name, or link to your blog.

Use Comments as headers

One of the things you can do to start, is to separate your code into sections, quite often before I start to coding up a stylesheet, I start by adding several header comments.

These can be anything you want them to be but try not to make them too complicated. Instead of writing “This is the styling for the all the headers” Just use “Header Styling” as your comment heading. That way when scanning the code you can get a better idea of what each section is about.

Example

Main Header

/*/////////////////////////////////
 
MAIN CONTENT Styling
 
/////////////////////////////////*/

Secondary Header

/* MAIN CONTENT Typography Styling */

Element Header

/* Link Styling */

Use Comments for explainations

Its all well using comments to separate sections, but its also important to include any reasons as to why you added an element or rule. Why did you add that extra pixel to the padding? What is the reason behind that float: left; rule?

Example

#wrapper {
    margin: 0 auto; /* this is to auto center the wrapper */
    position:relative;
}

Of course you don’t have to do this for every element, be selective, did that rule solve a problem? Maybe you can use it again in another project?

This will also help to re-enforce some vital Css techniques, and allow you to remember them easier.

Use comments to plan ahead

Using comments to plan ahead of time, or to remember important aspects can greatly improve your chances of getting everything done.

Although it’s important to keep your comments relevant to you code, you can use them to add notes to it.

Using comments to plan ahead of time, or to remember important aspects can greatly improve your chances of getting everything done.

I like to add a section at the top of my Css stylesheets where I can add anything that comes to mind, this doesn’t necessarily have to be related to the Css itself.

I have often added new ideas or to do lists!

Further Resources

Designer’s Toolbox: Blank CSS Template

Utilizing CSS Best Practices: Making a Great Blank CSS Template File for Next Projects