Coding conventions

Here are some coding conventions to make life easier - both for those who develop the framework, and for those who use it.

• Use meaningful HTML classes
• Do not confuse classes and IDs
• Use classes sparingly
• Use compound classes for CSS
• User lowerspace_underscore formats
• Comment on ambiguity or strangeness
• Tables only for tabular data
• Keep your HTML lean

Use meaningful HTML classes

Do not use cryptic or meaningless names for your HTML classes:

Bad:

<p class="style1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Good:

<p class="caption">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

Rule of thumb: Is my HTML human-readable (by a stranger)?

Do not confuse classes and IDs

An ID is a unique identifier for an HTML element. There should only be one element on a page with a given ID. Classes can be applied to multiple elements.

Use classes sparingly

It is sometimes tempting to give every element a class or an ID. Please don't - brush up on your selectors instead.

Use compound classes for CSS

An element can have more than one class applied to it. This allows you to have a really tight cascade, and reduces the number of classes you need.

The HTML:

<p class="footnote legal">Aliquam eget neque et ipsum sodales tincidunt.</p>

The CSS:

.footnote {font-size: 0.9em;}
.legal {color: #333;}
.footnote.legal {font-style: italic; text-align: right;}

The paragraph in this example would inherit all of the above properties. Note also that your .footnote.legal selector has more weight than the others.

User lowerspace_underscore formats

Please write all variables, html element classes, URLs and so on, in the same format:

• lowercase
• underscore-delimited
• no leading numbers (preferably no numbers at all)

var my_names_array = new Array("Bob","Julie","Pat");
var first_name = my_names_array[0];

Comment on ambiguity or strangeness

Can a complete stranger understand your code? No? Have you followed the rules above? Yes? Then leave a comment to explain what is going on.

With complex nested markup it is also a good idea to use comments to show which closing tag belongs where:

<div class="grid">
	
	<div class="column">
	       
	       First column
	       
	</div><!-- /1st column-->
	
	<div class="column span_three">
	       
	       Second column
	       
	</div><!-- /2nd column-->
	
	<div class="column last">
	       
	       Third column
	       
	</div><!-- /3rd column-->
	
</div><!-- /grid-->

Tables only for tabular data

Tables are great for tabular data - where you need to show relationships between data sets - but should not be used for page layout.

Keep your code lean

Less is best.

CSS »