Submit Your Article
You may have heard the saying, “Cleanliness is next to Godliness.”. This is a term that every programmer should learn and obey when creating code. When you create clean code it will help you troubleshoot any issues you may have with your code in the future. Here are five practices you should follow when writing code.
1. Line Breaks
This should be something that seems obvious for most designers but it should still be mentioned. When you put everything on one line, it becomes harder to read, and if you have to change any of the code in the future it takes longer. In CSS, it is nice to have a new line break after every attribute, this allows the designer and future designers to understand quickly where the attribute ends. Designers should get in the habit of pressing the Enter key for a page break after every semi-colon in their code. Having line breaks in your code also makes the code look more professional.
2. Tab Indentions/Single Indentions
This is a debate that designers have all the time, should you tab indent or use a single space indention? What ever you choose to use, be consistent with it. Don’t use tab indention for one attribute, then a single indention on the next. Like line breaks, being consistent with your indentions makes your code easier to read, troubleshoot, and look professional.
3. Clean Comments
Comments are great in coding. They can save a lot of time and stress when trying to find out what the original designer was trying to do. If the comments are not written cleanly, then comments can become useless. Comments should be as descriptive as possible and should be short and to the point. When writing comments, make them sound natural as if you are explaining the code to another designers. A comment like “An IE workaround” can be useful, but “An IE workaround for the :before pseudo element” is a lot better. Be consistent in how you comment also. If you using one line comments your entire code, then switch to multiline comments for no apparent reason, it can throw off the person reading the comments.
4. Consistent and Descriptive Classes and IDs
In programming, one of the first things you are taught are to be descriptive when naming a variable. A class or ID with a descriptive name can assist in helping understand what the designer is trying to do. A class named odd isn’t very descriptive. Does odd mean an odd number, or something odd is happening that should not be happing. Where as odd_row will let you know that the row is odd, and if you have an even_row class, then it is a little safer to assume that the classes effect something that alternates between even and odd numbers. Being consistent with variable names helps your code be clean also. If you had classes that started with a capital letter, then in the HTML tags you call them with a lowercase letter it can become confusing. CSS and HTML are not case sensitive, but it helps if you remember to keep an eye on upper and lower case characters. Perfection is in the details, and making for sure you are consistent with variable names is just one more detail to remember.
5. Nesting
Nesting is the idea of putting similar code together so that it can be read easier. In CSS, you may want to nest attributes based on their class and ids. It is a lot easier to understand what a designer is trying to do when the designer puts all the attributes for a class called clean_code together. It also makes it easier to change one attribute that effects that class then searching through all the lines of code. When you use nesting with indentions and line breaks, this can make a big difference in how easy your code is to read.
Topics: CSS, Design, Web Development
