It’s a new year and I have spend time talking to other front-end developers about their preferred best practices. Also, HTML5 received a draft update last year and I had a bit more experience with it. It’s time to make a few choices and try to stick with them. Feel free to use the below guidelines to help you improve your code consistency and create your own best practice.
There are a few simple benefits from having coding standards. Your source code is easier to read, has more consistency, sharing your code with others, or going back through it (legacy) will be easier. You support better loading-, performance-, and maintainable code for your pages. The only downside is that you have b considerate of others in the industry and perhaps remember your decisions.
This article is to introduce your to the general practices of coding standards for web applications, one specifically for html5 and css3 will be published separately.
Complexity (input) behind simplicity (output) deconstructed
Your code should be semantically correct, well-formed, using indentation, lower-case, and it should be valid syntax.
While this is correct:
<DIV class=warning><p>Watch out!</Div>
(the above uses capitalization, no double quotes for attribute values, and while the closing tag for p is optional, it’s wrapped around content so now it is required)
This is what I prefer, and use:
<div class="warning"> <p> Watch out! </p> </div>
(all lowercase, values inside double quotes, p tag is properly closed. And markup is using indentation)
These principles can apply to markup, presentation and behavior
Constantly test and optimize your code. Practice various situations and branch your changes from a master source.
Consider accessibility, performance, mobile web, alternative devices, search engine optimization, caching of content, and consider putting static-content on a cdn.
One more thing.
Before I let you go I want to share more a believe than a coding standard or a policy about best practices. I believe that how you are as a person reflects in the code. Better the way you deal with your projects, to better your life. Test various programs, pick one and learn it. Organize your projects, share and discuss what you’re doing with others. Support the industry, open standards and semantic web. Getting inspired by others to innovate will result in having the ability to learn, share your knowledge, and improve the quality of your work.