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.

HTML/CSS

General

  • 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.

Head

  • 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

Layout

  • 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

Tables

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

Anchors

  • Use the anchor title attribute correctly (e.g. <a href="http://blog.com/all-articles" 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);">)

Images

  • 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.

Forms

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

Other

  • 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.

JavaScript

  • 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