10 Coding Principles for Front-end Developers

TMO Group TMO Group

HTML has gone through more than 20 years of stormy road. From HTML1 to HTML5, it almost witnessed the development of Internet. Coding need new ideas, and we also need to follow some principles.

Today let’s talk about 10 coding principles that front-end developers should follow.

1. Be good at using div

When you are developing a web page, the first thing is to distinguish the layout. By using div, your code will be clean and easy to understand.

 <div id=”header”></div>
 <div id=”body-container”>
 <div id=”content”> <!– Content — > </div>
 <div id=”right-side-bar”> <!– Right Side Bar Content Area — ></div>
 </div>
 <div id=”footer”></div>

2. Segmentate HTML and CSS

A good page should be able to separate HTML and CSS. Developers should have a habit that do not write CSS code in HTML tags. And developers should create a new file which include all style sheet and it can also help other developers to easily read your code.

<p style=”color: #CCC; font-size:16px; font-family: arial”>
An example to illustrate inline style in html</p>

3. Optimize CSS code

Nowadays, many developers like to create many css files for one website. Actually it does harm to the pagespeed. The solution is to merge CSS files. There are many tools for example CSS Optimizer, Clean CSS can be achieved.

4. Put Javascript on the bottom line

Same with CSS files, too much Javascript would also slow the website. But there is one thing different with CSS. Browsers can not load many Javascript at one time. One solution is to put these files on the bottom of the site.

5. Be good at using heading element

<h1> to <h6> are used to highlight the page. We recommend to use <h1> tag for the title of the article.

<h1>This is the topmost heading</h1>
<h2>This is a sub-heading underneath the topmost heading.</h2>

6. Use appropriate HTML tags in the right place

Tags of HTML are used to construct the content. For example <em> is used to emphasize the content and <p> is used to separate paragraphs. We should use appropriate tags in the right place.

7. Don’t forget to close tags

According to W3C standards, we need to close tags especially in IE6, IE7 and IR8.

8. Lowercase

Use lowercase for tags is the standard. One reason is that we concern about the readability. For example the following code:

<DIV>
  <IMG SRC=”images/demo_image.jpg” alt=”demo image”/>
  <A HREF=”#” TITLE=”click here”>Click Here</A>
  <P>some sample text</P>
</DIV>

9. Add “alt” attribute

The alt attribute is used in HTML and XHTML documents to specify alternative text (alt text) that is to be rendered when the element to which it is applied cannot be rendered. It is also used by “screen reader” software so that a person who is listening to the content of a webpage can interact with this element.

10. Add notes for browser compatibility

As developers, responsive web design always make them headache. It will be better if we add some notes for different browsers.

<!–[if IE 7]>
  <link rel=”stylesheet” href=”css/ie-7.css” media=”all”>
  <![endif]–>
  <!–[if IE 6]>
  <link rel=”stylesheet” href=”css/ie-6.css” media=”all”>
  <script type=”text/javascript” src=”js/DD_belatedPNG_0.0.8a-min.js”></script>
  <script type=”text/javascript”>
  DD_belatedPNG.fix(‘#logo’);
  </script>
  <![endif]–>