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).
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.
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.
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.