Coding Standards for Web Development

Transcription

1 DotNetDaily.net Coding Standards for Web Development This document was downloaded from 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 2 Coding Standards for Web Development Contents 1 HTML Coding Standards HTML General Rules HTML Markup Formatting CSS Coding Standards CSS General Rules CSS Formatting... 5

3 3 Coding Standards for Web Development 1 HTML Coding Standards 1.1 HTML General Rules Always close your tags; Keep your tag names lowercase: Good: Bad: <div> <p>lorem lipsum sit dolorem. </p> <DIV> <P>Lorem lipsum sit dolorem. </P> </DIV> Use H1 H6 tags. For semantic and SEO reasons, try to use heading tags. The hierarchy of them in the page is important too Wrap navigation with an unordered list; <ul id="nav"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> Always complete the alt attribute of an image; For naming ID's of HTML tags, use Camel Case and for naming classes use lower case: <ul id="navcontainer" class="nav-container"> <li><a href="#">home</a></li> <li><a href="#">about</a></li> <li><a href="#">contact</a></li> </ul> 1.1.7

4 4 Coding Standards for Web Development 1.2 HTML Markup Formatting Place a comment tag at the end of each important HTML container that notifies the end of that specific tag; <div id="loginwrapper"> <form action="" method="post"> <input type="text" name="username" class="loginusername" value="please type your address"/><br/> <input type="password" name="password" class="loginpassword" value="please type your password"/><br/> <input type="submit" value="" class="login-button" /><br/> </form> <!-- End of #LoginWrapper --> When you want to add comments inside ASP.NET Web Controls, use this syntax: <%-- ASP.NET syntax for comments --%> Use one blank line to separate important HTML containers; <div id="page"> <div id="header"> <!-- HTML code --> <div id="content"> <!-- HTML code --> <div id="footer"> <!-- HTML code --> Use TAB for indentation. Do not use spaces. Recommended TAB size is 4; 2. CSS Coding Standards 2.1 CSS General Rules

5 5 Coding Standards for Web Development Use margin: 0px auto; as a CSS attribute for centering a div inside container; Use.px as measurement unit in design. It s easier to control than.em and all the developers on a project can understand it; Use CSS reset class, example: *{margin: 0px; padding: 0px}. You can add additional attributes to this class depending on your requirements Use structural naming convention instead of a presentational naming convention: 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> CSS Formatting CSS: Use Single-Line formatting. This is the most space and size efficient way to write 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 } ul.nav li { display:inline; margin:0 10px 0 0 } div.column { float:left; margin:0 70px 0 0; padding: px; width:340p x } div.post-wrapper { bottom center norepeat; 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 } Use one blank line to separate logical groups of styling: table thead tr th.left-corner { /* CSS style */ }

6 6 Coding Standards for Web Development table thead tr th.right-corner { /* CSS style */ } table#addnewuser{ /* CSS style */ } table#addnewuser thead tr th h3{ /* CSS style */ } 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: 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 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: /* $DEFAULTS */ body { background: #b6b7bc; font-size:.80em; fontfamily: "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: smallcaps; 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;} h3{ font-size: 1.2em;}

7 7 Coding Standards for Web Development h4{ font-size: 1.1em;} h5, h6{ font-size: 1em;}