Coding Standards for Web Development

(1)

Coding Standards for Web

Development

This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and

distribute this document for any noncommercial purpose as long as you retain this license & copyrights information. This document is provided on “As-Is” basis. The author of this document will not be responsible for any kind of loss for you due to any inaccurate information provided in this document.

(2)

http://dotnetdaily.net

1 HTML Coding Standards

1.1 HTML General Rules

1.1.1 Always close your tags;

1.1.2 Keep your tag names lowercase:

Ex:

Good:

<div>

<p>Lorem lipsum sit dolorem. </p> </div>

Bad:

<DIV>

<P>Lorem lipsum sit dolorem. </P> </DIV>

1.1.3 Use H1 – H6 tags. For semantic and SEO reasons, try to use heading tags. The hierarchy of them in the page is important too.

1.1.4 Wrap navigation with an unordered list;

Ex:

<li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>

1.1.5 Always complete the alt attribute of an image;

1.1.6 For naming ID's of HTML tags, use Camel Case and for naming classes use lower case:

Ex:

<li><a href="#">About</a></li> <li><a href="#">Contact</a></li> </ul>

(4)

1.2 HTML Markup Formatting

1.2.1 Place a comment tag at the end of each important HTML container that notifies the end of that specific tag;

Ex:

</div>

1.2.2 When you want to add comments inside ASP.NET Web Controls, use this syntax:

Ex:

<%-- ASP.NET syntax for comments --%>

1.2.3 Use one blank line to separate important HTML containers; Ex: <div id="Page"> <div id="Header">  </div> <div id="Content">  </div> <div id="Footer">  </div> </div>

1.2.4 Use TAB for indentation. Do not use spaces. Recommended TAB size is 4;

2. CSS Coding Standards

(5)

2.1.1 Use margin: 0px auto; as a CSS attribute for centering a div inside container; 2.1.2 Use .px as measurement unit in design. It’s easier to control than .em and all the developers on a project can understand it;

2.1.3 Use CSS reset class, example: *{margin: 0px; padding: 0px}. You can add additional attributes to this class depending on your requirements.

2.1.4 Use structural naming convention instead of a presentational naming convention:

Ex:

Good:

<p> Lorem lipsum sit <a href="#" class="article-link">dolorem</a></p>

Bad:

<p> Lorem lipsum sit <a href="#" class="red-link">dolorem</a></p>

2.1.5

2.2 CSS Formatting

2.2.1 Use Single-Line formatting. This is the most space and size efficient way to write CSS:

Ex:

div.wrapper { margin:0 auto; padding:200px 0 0 0; width:960px; z-index:2 } ul.nav { position:absolute; top:0; left:430px; padding:120px 0 0 0 } ul.nav li { display:inline; margin:0 10px 0 0 }

div.column { float:left; margin:0 70px 0 0; padding:0 0 0 70px; width:340p x }

div.post-wrapper { bottom center

no-repeat; margin:0 0 40px 0; padding:0 0 40px 0 }

div.wrapper img, div.wrapper a img, div.article_illustration_mini { backgr ound:#d3d4cb; padding:10px; border:1px solid #999 }

div.wrapper a:hover img { background:#fff }

2.2.2 Use one blank line to separate logical groups of styling: Ex:

(6)

table thead tr th.right-corner { /* CSS style */ }

table#AddNewUser{ /* CSS style */ }

table#AddNewUser thead tr th h3{ /* CSS style */ }

2.2.3 Order your CSS properties. For example, if you are styling a <h1> tag, put first the font-related declarations then color-related declarations and finally the position-related declarations: Ex: h1 { /* Font */ font-size: 2em; font-weight: bold; /* Color */ color: #c00; background: #fff; /* Box model */ padding: 10px; margin-bottom: 1em; }

Comments are optional, so is the formatting.

2.2.4 Order the CSS items in groups. This way you can easily read the contents and jump straight to a particular section. Prepending each heading with a dollar sign makes it unique, so that a search will yield only headings:

Ex:

/* $DEFAULTS

---*/

body { background: #b6b7bc; font-size: .80em;

font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana,

sans-serif; margin: 0px; padding: 0px; color: #696969;}

a:link, a:visited{ color: #034af3;}

a:hover{ color: #1d60ff; text-decoration: none;} a:active{ color: #034af3;}

p{ margin-bottom: 10px; line-height: 1.6em;}

/* $HEADINGS

---*/

h1, h2, h3, h4, h5, h6{ font-size: 1.5em; color: #666666; font-variant:

small-caps; text-transform: none; font-weight: 400; margin-bottom: 0px;}

h1{ font-size: 1.6em; padding-bottom: 0px; margin-bottom: 0px;}

h2{ font-size: 1.5em; font-weight: 600;}

(7)

h4{ font-size: 1.1em;}

h5, h6{ font-size: 1em;}

Coding Standards for Web Development