Maintainable Websites are More Likely to Be Maintained
When you're learning Web development, it can be tempting to be as complicated as you can possibly be - just to prove that you understand the really complex stuff. But the more complicated and complex your HTML the more likely it will be confusing and hard to edit when you return to it months later. But don't feel bad if you find this problem on your sites. Most developers go through this. This article will help you to recognize the signs of a difficult to maintain site and give suggestions for what you can do to fix it.
Code That is Difficult to Maintain
- Nested tables
The more tables you have inside of tables, the more difficult the HTML is to read because the tags all blur together. It can be very difficult to tell where one table ends and the next begins. Nested tables also cause pages to load more slowly.
Many developers learning to build Web pages with CSS end up using the div tag for everything. This can be very difficult to figure out what each div is for later.
- No comments
Comments are vital in complex code, because they tell you what you were trying to acheive. But most developers don't use any comments.
- Long CSS documents
The longer your CSS is, even if it's separated into multiple files, the more complex your pages will be. Because of inheritance, specificity and the cascade, one simple style rule hidden deep in the document can cause huge problems later in how the pages look.
- Using complex CSS selectors
The more complicated your CSS selectors, the more specific your styles will be, but the more likely it is that you won't remember why you needed a style that specific more than a week.
How to Write Maintainable Web Page Code
The easiest way to write maintainable code is to avoid the problems listed above. But sometimes this isn't possible. But if you take the following advice, you can write code that is easier to manage either for yourself or someone who takes over for you later.
- Comment your code
Even if you think that it's self-explanatory - comments make the obvious things stay obvious.
- Keep your code simple
If you can do it with one tag or CSS property, don't use two. Or if you can do it with a few basic tags or styles, don't get complicated.
- Use multiple style classes
One thing that many developers don't know is that most modern browsers support multiple classes (separated by spaces) on an element. So if you have a class to make text bold and red and another class to make it italicized, you don't need to create a third class to make your text bold, red, and italicized. Just use those two classes on the element.
- Document your code
Beyond comments, most complex sites could do with a style guide or manual that explains the code. Then if you know you need a 1.2em blue headline, you can just look in the documentation to determine the style class, rather than creating an entirely new one.
- Pretend you're writing the HTML so that your mother could understand it
Or if not your mom, someone who isn't comfortable with HTML. The more effort you put into making your code understandable, the more you'll benefit from those efforts in the long run.
- Accept that there are no simple answers.
Finally, you need to remember that as hard as you work to make your code maintainable, there are going to be issues with it in the long run - unless your pages are so simple that they are boring. When you come across something you've built that you can't understand six months later, just do your best to understand and document it now.