Comments and Indentation

Commenting

“Write Good Comments” is the oldest piece of advice in the world of programming. Developers are encouraged to comment as often as they can, as long as we don’t go into the opposite direction, and comment too much. Newbies tend to ‘over-comment’ and describe unnecessary things, missing the point in what a ‘Good Comment’ is.

A ‘Good Comment’ should be stating why a particular block of code is there and shouldn’t explain what it is doing. In Front-End code, commenting is good to state sections on a page such as header, Main Nav or Footer.

In the example below, you can see two identical chunks of code, one with commenting and one without. The one on the left – with commenting would help another developer find wherever they need to be in the code, whereas if a developer was using the one on the right, they may find it difficult – especially if there was hundreds and hundreds lines of code.

 

Code without Comments.

 

 

Code with Comments.

 

Indentation

Indentation makes coding a whole lot easier and can save you or other developers working with the code a lot of time. It can make the code a lot more readable and easy to work with. Looking at the above screenshots, you can see I have the .header class style. You can see the styles are slightly indented. If you look at the .border class, none of it has been indented and just looks like a big confusing chunk of code. If it wasn’t for the colours used in the Codepen text editor, it would look really confusing.