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. Consistent use of the top-down method will make your code editing so much easier.
2. Using Comments
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
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. Here’s some that you might want to try out: DirtyMarkup, CleanCSS, HTMLTidy.
Image Source: #WOCinTech Chat