(you can use accesskey 4)

Front-End Code Standards

These standards are separated in to requirements which should be testable and guides to encourage further improvements and help with the requirements.

Revision History

This version was compiled on

Updates to Javascript Requirements
Split layout in to requirements and guides

Code Structure


  1. Separation of presentation, content, and behavior.

    • No css in style attributes in basic HTML output
  2. Javascript should progressively enhance the experience

  3. Links

    • When putting example links within front end code which will be integrated at a later date use href="none" instead of href="#". These will then show up when we crawl for broken links.

      <a href="none">link</a>
  4. Media

    • Always have the logo as a single img on the page. This will enable it to be picked up easily when the page is shared with social sites.
    • Put all media including images which will end up being added by the CMS in to the /cms-content folder within the root of the site
  5. Indentation

    • We require indentation to be done via soft tabs (using the space character). Hitting Tab in your text editor shall be equivalent to four spaces



  1. New projects should be coded using the HTML5 doctype

    <!DOCTYPE html>
  2. All markup should validate with a few exceptions

  3. All markup should work as expected without CSS and JavaScript

  4. Markup should be well-formed and semantically correct

  5. A set of skip navigation links should be included near the beginning of the page

  6. ID’s and Classes should be used appropriately to aid good maintainability



Markup Validation Exceptions


HTML5 is a new version of HTML and XHTML. The HTML5 draft specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML. (source).

Developers are also need to support legacy sites running xhtml doctypes:


A nice aspect of HTML5 is that it streamlines the amount of code that is required. Meaningless attributes have been dropped, and the DOCTYPE declaration has been simplified significantly. Additionally, there is no need to use CDATA to escape inline JavaScript, formerly a requirement to meet XML strictness in XHTML.

<!DOCTYPE html>

XHTML 1.0 Strict Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

XHTML 1.0 Transitional Doctype

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Coding Practices

IDs and Classes

We reduce the use of IDs to core structural elements such as the main header and footer and primay/secondary navigation.

Otherwise we only use IDs on content that should be accessed through a #tag in the url (this includes tabs). We don’t use IDs on content based layouts such as 3 column navigation,body and aside containers.

Here is an example illustrating this:

    <header id="mainHeader"></header>
    <nav id="nav-primary">...</nav>
    <div class="leftColumn">
        <nav id="nav-secondary">...</nav>
    <div class="contentBody">
    <aside class="contentAside">
    <footer id="mainFooter"></footer>




  1. No use of inline styles using the style attribute. more

  2. CSS Validates with a few exceptions

  3. font-size should use ems. more

  4. line-height values should be unitless ie: line-height: 1.5. more

  5. Add css through external files.

  6. Css links should always be in the <head> of the document and before any <script> declarations.

  7. Use the <link /> tag to include, never the @import.

     <link rel="stylesheet" type="text/css" href="myStylesheet.css" />
  8. Don’t use inline styling

    <p style="font-size: 12px; color: #FFFFFF">This is poor form, I say</p>
  9. Use a reset css file (like Eric Meyers reset) to zero our cross-browser weirdness.

  10. Elements that occur only once inside a document should use IDs, otherwise, use classes.


General Principles


CSS Specificity is a standard which is surprisingly misunderstood and missused.

In this example, the color of the P element would be green. The declaration in the “style” attribute will override the one in the STYLE element because of cascading rule 3, since it has a higher specificity.

// simply put calculate using the concatenated 
// number from style|id|class|element
// eg: 0|1|0|0 = 100, 0|1|0|12 = 1012
*	          {}  /*	a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li            {}  /*	a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {}  /*	a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li         {}  /*	a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li      {}  /*	a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{}  /*	a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red  {}  /*	a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level  {}  /*	a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y         {}  /*	a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style=""          /*	a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

	<STYLE type="text/css">
		#x97z { color: red }
	<P ID=x97z style="color: green">
Useful articles

Inline Styles

We strive to maintain proper separation of content and design, and therefore highly discourage the use of inline style=”…” attributes. This not only makes maintenance a nightmare, but inextricably ties the presentation to the data it represents.

Note: An exception to this rule is style=”display:none” for revealing hidden elements via JavaScript.

CSS Validation

We validate our CSS with the W3C validator. Because of the nature of cross browser CSS there are a few exceptions which we allow to pass.

CSS Formatting

Some developers prefer css properties on their own line. Others prefer putting them next to eachother and doing one rule per line. Both are good approaches; at the outset of development, the project team should decide which they want to do.

Pixels vs. Ems

We use the em unit of measurement to define font-size, because it is the most accessible way to allow text resizing cross browser. We realise that from IE7 you can use zoom but we have decided this isn’t quite the same thing.

However we only use ems for font-size and not for margin or padding. All other units should be in px or % where appropriate.

Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

/*	 Equivalent to 13px font-size and 20px line-height, 
	but only if the browser default text size is 16px. */
#selector {
	font-size: 0.813em;
	line-height: 1.5;  /*	 13 *	1.5 = 19.5 ~ Rounds to 20px. */
#selector {
	font-size: 13px;
	line-height: 1.25em;

Internet Explorer Bugs

Inevitably, when all other browsers appear to be working correctly, any and all versions of Internet Explorer will introduce a few nonsensical bugs, delaying time to deployment. While we encourage troubleshooting and building code that will work in all browsers without special modifications, sometimes it is necessary to use conditional if IE comments for CSS hooks we can use in our stylesheets. Read more on paulirish.com

Fixing IE
<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
.box { float: left; margin-left: 20px; }
.ie6 .box { margin-left: 10px; }

Stoyan Stefanov writes about how these conditional comments can block downloads in some browsers while interpreting these comments. He prescribes a successful method which involves the injection of an empty conditional comment before any substantive conditional comments.

<!--[if IE]><![endif]-->
<html lang="en">
		<title>base page</title>
		<link type="text/css" rel="stylesheet" 
		<!--[if IE 6]>
			<link type="text/css" rel="stylesheet"
		<!--[if IE 7]>
			<link type="text/css" rel="stylesheet"
ie HasLayout

There are several bugs in Internet Explorer that can be worked around by forcing “a layout” (an IE internal data structure) on an element (like, dimensional bug fixes and Holly hack).

Most users are not aware of the implications of having “a layout” applied to an element. This document explains what happens when an element has a layout and what implications that has.

To begin with, there are two sets of elements.

Elements that rely on a parent element to size and arrange their contents Elements that are responsible for sizing and arranging their own contents In general, elements in Internet Explorer’s Dynamic HTML engine are not responsible for arranging themselves. A div or a p element may have a position within the source-order and flow of the document, but their contents are arranged by their nearest ancestor with a layout (frequently body). These elements rely on the ancestor layout to do all the heavy lifting of determining size and measurement information for them.

Note: The element that is responsible for sizing and positioning an element may be an ancestor, not just the element’s immediate parent.) The major benefits of each element not having its own layout are performance and simplicity.

Keep Reading:


In general, CSS shorthand is preferred because of its terseness, and the ability to later go back and add in values that are already present, such as the case with margin and padding.

Developers should be aware of Top, Right, Bottom, Left, denoting the order in which the sides of an element are defined, in a clock-wise manner.

For more on reducing stylesheet code redundancy, and using CSS shorthand in general:

Reasonable use of qualifying class selectors
.error {color:#ff0000;}
input[type=text].error, textarea.error {background-color:#ffe6e6;}
select.error {border:1px solid #ff0000;}

Multiple classes and IE6.

p.disclosure.warning { text-align: center; color: red; }

IE6 will ignore the earlier class rule and treat that rule like:

p.warning { text-align: center; color: red; }




General Principles

Naming Conventions


In general, the use of whitespace should follow longstanding English reading conventions. Such that, there will be one space after each comma and colon (and semi-colon where applicable), but no spaces immediately inside the right and left sides of parenthesis. In short, we advocate readability within reason. Additionally, braces should always appear on the same line as their preceding argument.

Consider the following examples of a JavaScript for-loop…
for (var i = 0, j = arr.length; i < j; i++) {
	// Do something.
for ( var i = 0, j = arr.length; i < j; i++ )
	// Do something.
Also incorrect
for(var i=0,j=arr.length;i<j;i++){
	// Do something.


We use JsLint to validate our JavaScript. We recognise that it can be a little strict and so in the defense of sanity we don’t mind developers using the /*jslint*/ comment block to relax the validation process.

However the following should not be used:

Here are a couple of articles which should help with using jsLint

Intellisense and Documenting


We take a lot of care to ensure that our web sites are accessible. Not only is it required by law but more site visitors will enjoy a better browsing experience. You will also find that as a result the site’s discoverability will improve which mean it’s easier to index by search engines. Google will love you!

Here is an example of a stylesheet which a visually impaired user can add to a browser to apply styles across websites.

/*Copyright 2002 One Format Design - 011000 - version 0703*/
body {background: none #FFFFFF !important}
body * {background: none #FFFFFF !important}
img {background-color: #FFFFFF !important}
input {background-color: #DEDEDE !important}
option {background-color: #DEDEDE !important}
textarea {background-color: #DEDEDE !important}
body {color: #00193E !important}
body * {color: #00193E !important}
font {color: #00193E !important}
a:link {color: #0035FA !important}
a:link * {color: #0035FA !important}
a:visited {color: #0035FA !important}
a:visited * {color: #0035FA !important}
a:hover {color: #FE660D !important}
a:hover * {color: #FE660D !important}
a:active {color: #FE660D !important}
a:active * {color: #FE660D !important}
input {color: #00193E !important}
option {color: #00193E !important}
textarea {color: #00193E !important}
h1,h2,h3,h4,h5,h6 {color: #00193E !important}
h1 font,h2 font,h3 font,h4 font,h5 font,h6 font {color: #00193E !important}
body {font-family: Arial, Verdana, Helvetica, sans-serif !important}
body * {font-family: Arial, Verdana, Helvetica, sans-serif !important}
body {font-size: 11pt !important}
body * {font-size: 11pt !important}
h1 {font-size: 1.50em !important}
h2 {font-size: 1.25em !important}
h3 {font-size: 1.15em !important}
h4,h5,h6 {font-size: 1.0em !important}
h1 font {font-size: 1.0em !important}
h2 font {font-size: 1.0em !important}
h3 font {font-size: 1.0em !important}
h4 font,h5 font,h6 font {font-size: 1.0em !important}
* {font-style: normal !important}
* {line-height: 1.3 !important}
* {text-decoration: none !important}
input {height: 1.7em !important}
option {height: 1.7em !important}
textarea {height:       !important}

ARIA -Accessible Rich Internet Applications TODO

Perception: Widgets aren’t percieved like we do as contained items

Roles and regions

A good start is to apply the role attribute to particular sections of the page. Here’s a basic guide:

<div id="search" role="search">
	<label for="search">Search</label>
	<input type="text" name="search" />
<div id="nav-primary" role="navigation"></div>
<div id="nav-secondary" role="navigation"></div>
<ul id="breadcrumb" role="breadcrumbs">
<div id="content" role="main"></div>

Progressive Enhancement and Feature Detection TODO

Progressive enhancement is an approach to web development that aims to deliver the best possible experience to the widest possible audience - whether your users are viewing your sites on an iPhone, a high-end desktop system, a Kindle, or hearing them on a screen-reader, their experience should be as fully featured and functional as possible.

Integrating common UI code

Dynamic Tabs (jQuery)

// Go to http://jqueryui.com/demos/tabs/ for full jQuery integration.
<div class="nav-tabs">
	<ul class="nav-tabs-nav">
		<li><a href="#tabname">Tab Name</li>
	<div id="tabname" class="nav-tab"></div>
<div class="nav-tabsTstatic">
	<ul class="nav-tabs-nav">
		<li><a href="#tabname">Tab Name</li>
	<div id="tabname" class="nav-tab"></div>


As this section contains a lot of code samples it has been split in to a separate page.


Thanks to the following sites for inspiration and reuse.