Front End Coding Best Practices

How we strive to achieve high quality client-side code

Below are listed the front end coding best practices that we strive to follow. This is an ever-changing landscape and experts continue to argue over some of them. On some projects some of these may not apply. For example performance considerations are not a high priority for a basic website with a small budget.



  • Close tags
  • Validate HTML & CSS
  • Compress the CSS and JS files when about to move to production
  • Avoid inline styles (e.g.<p style="color: red;">)
  • Use IDs for elements that occur only once inside a document, otherwise use classes
  • Avoid over-wrapping elements in divs - paragraphs, links etc can be targeted without a bounding div
  • Commenting is mostly not essential if naming conventions are applied well and structures are uncomplicated. It does however help to have comments on closing tags for bigger blocks of code.


  • Declare the correct DocType
  • Place all external CSS files Within the Head Tag
  • Use an "ie.css" file for IE workarounds
  • Use charset=UTF-8 unless there are reasons to use an alternative
  • Use the LINK tag to include rather than @import
  • Organize documents so they may bereadwithout style sheets


  • Use lower case tags
  • Format code consistently
  • Avoid naming classes according to their display (e.g. don't call a class bigBlue)
  • Avoid using spacer images
  • Use a CSS Reset File - example or example.
  • Avoid using iFrames


  • Use THEAD, TBODY, and TH tags where appropriate
  • Avoid using tables for layout


  • Use the anchor title attribute correctly (e.g. <a href="" title="A list of all articles.">Click here.</a>)
  • Utilise a bottom-border for links rather than text-decoration.
  • Links should be to a page, not to a JS function (<a href="javascript:loadPage(2);">)


  • Use the "alt" attribute for all images
  • Use the Kellum method if images are replaced with text
  • Use CSS sprites
  • Produce images (except logos) with a transparent background and ensure they are tightly cropped.


  • Use <Fieldset> and <Label for> in forms
  • Use the size attribute on your input fields


  • Wrap navigation with an unordered list
  • Clear floats using a modern method
  • Use the px unit of measurement to define font size (rather than em)
  • Vertically space using multiple BR tags
  • Style all elements - create a special page specifically to show off the styling of every element: ul, ol, p, h1-h6, blockquotes, etc.
  • Use the more unusual elements to maximise the semantics of the HTML
  • Avoid expensive CSS selectors where possible. For example, avoid the * wildcard selector and don't qualify ID selectors (e.g. div#myid) or class selectors (e.g. table.results).
  • Use unit-less line-height if possible.


  • Cater gracefully for no JavaScript
  • Place Javascript Files at the bottom if they are not used to load the page
  • Avoid using inline Javascript
  • Avoid using document.write()
  • Prefix all Boolean variables with "is"
  • Minimize the use of global variables