How To Write Clean Organized Code

If there's one thing you should get into the habit of when you're learning how to code, it's writing clean and organized code. If you plan on ever looking for a bug in long lines of unorganized and messy code, good luck! In this article, I'm going to give you four easy tips that you can use to write clean and organized code (i.e. HTML, CSS).

1. The Top-Down

Writing your code from the top-down is easy to do. When you're writing out your code, you want it written in the same logical flow of how you designed your website, which is usually from the top-down. This method is easy when coding HTML5 because the positioning of the code is vital to the structure of the website. If you do this in your stylesheet, you're going to find it so much easier to read and find areas in your CSS code. Consistent use of the top-down method will make your code editing so much easier.

2. Using Comments (moderately)

Take advantage of the ability to add comments in your code. Especially in your stylesheet, where long lines are inevitable. Now, I'm not saying to add comments to your code, line by line. This is mostly for the larger sections of code on your website. This will help keep your code structured and organized. If you're familiar with CSS, you might be aware of how long those lines of various styles can get. Here's a tip: add a “table of contents” at the beginning of your stylesheet. The table of contents will list the different sections within the document. You'll also have headings at the start of every section.

3. Use Preprocessors

Preprocessors help to promote the practice of writing clean and organized code, but that's not all that they do. Preprocessors can also save you a lot of valuable time. Ever heard of Sass, Haml or CoffeScript? They're all preprocessors. They help reduce the amount of code that you would use to write CSS, HTML, and JavaScript. They also follow the DRY (Don't Repeat Yourself) principle. Preprocessors are customizable and have huge communities behind them. So, if you want to learn how to use preprocessors, there's a ton of support.

4. Use Code 'Beautifiers'

Code ‘Beautifiers' are the best invention since sliced bread. It could take hours trying to indent your lines of code, remove spacing and more. If you're a fan of quick fixes, code beautifiers will do the trick. I've found several on the web and I've used them with great success. Here's some that you might want to try out: DirtyMarkup, CleanCSS, HTMLTidy.