Skip to main content

Code Style - Write for your future self

Professionals know that code that is written for visual clarity and well commented is much easier to maintain in the future. In code development time is money and normally the easier it is to read and decipher the code the quicker changes can be made.

Here are some simple but important coding techniques that will make your code easier to maintain now and in the future.

Commenting

CSS uses the /* and */ comment markers. (Sorry, the single line comment: // is not recognized by the browsers.) Notice that there is a space separating the asterisk "*" from the rest of the code. This is just like putting spaces in between words: it makes it much easier for the browser the beginning and end of things.

Start the CSS page off with a header comment.

 
/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
fileName.css - and a description of what this style sheet will be doing
author: your name and email address or website
written: date the style sheet first set up
revisions: date - description of the revision (especially important when working in a team environment)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
 

Layout the CSS rules using 3 columns

In the first column list the selectors (pink in the graphic below) and then the properties (dark blue in the graphic below). Be consistent with the curly braces putting the opening one right after the element going down two lines and typing in the closing one right away, so you don't forget it.

CSS code layout using three columns

In the middle column list the values for each property, lining them all up with each other. Use spaces NOT TABS. (Tabs change size on different computers which will completely obliterate all your code styling efforts. Check your text editor. Almost every editor has a preference setting that will automatically convert each TAB to a certain number of spaces.

Formatting Tip: background-color: is one of the longer properties. Use it to determine where the middle column should start. Even though the graphic shows the properties being indented, it is okay to start them at the far left, giving you more room for comments in the third column.

In the third column add comments describing what each item does. This will save you hours of work. This is especially true if you are smart in your commenting. Instead of stating the obvious, describe any weirdness that may be happening or how this attribute relates to the others. Pretend that whoever will be reading your code in the future has only the basic knowledge of CSS.

Follow these guidelines for styling your CSS code. It will make you look very professional as well as making your web programming future a lot less stressful.