Goals:

Improve communication about elements of the project.
Increase likelyhood that different people will use the same name even if they are working separately
Take the guess work out of creating a name

This document is a suggestion. Espen, Christopher & Andreas discussed the naming section but not the code conventions part yet.

Naming

Questions

1. What is the order of words in element specifiers?
*English order: .list-view-button
*Categorization order: .btn-view-list
*Mixed: .btn-list-view

2. Use abbreviations sometimes- or full words?
*Abreviation: .btn-
*Full .button-

3. For class names - only use a short specific name - since the context is set by where it is?
*Short name: .list
*Long name: .btn-view-list
*A benefit of the long name is searching through code for definitions.

Application specific names:

#login (Login)

#shell-header (Shell Header)

(Shell Apps)
#shellapp-appslauncher (Apps Launcher)
#shellapp-pulse (Pulse)
#shellapp-favorites (Favorites)

(Apps)
#app-pages
#app-assets
#app-page-editor (Should sub apps be named/treated differently)
Details of elements

header
#logo
#main-launcher
#user

app
section.app-header
section.app-actionbar
section.app-view-options
section.app-content-area
.btn-close
.title
.search
.views
.view-tree
.view-list
.view-thumbnail
.filters
.filter-all
.filter-images
.filter-videos
.filter-audio
.sort
.search

Accessibility

Use Appropriate HTML5 semantic elements where possible

Buttons
When using a div or span as a button - add roll="button" attribute to the tag. http://www.w3.org/WAI/PF/aria/roles#role_definitions
Consider using some of the other role tags.

Coding Standards:

HTML:

Use lowercase names with dashes (for CSS selectors, File names including images)
A class used to add an event handler should start with the fragment "action-"
A class used to specify a button should start with the fragment "btn-"
Use id for elements that definitely only appear in the application once.
Especially for "places".
Use class for elements that appear multiple times.
Use HTML5 elements where appropriate instead of "div":
ie"section" "nav" "header" etc.

Javascript:

Use camelCase for javascript variables.
Unless the variable is trivial - start the name with a letter representing type:
iCount (int)
sName (string)
oGlom (object)
dFraction (decimal)
elDiv (el represents a DOM element)
$elDiv ($el represents a jQuery DOM element)
aUsers (array)

jQuery:

When selecting a set of elements, where possible specify an id first to narrow the DOM search tree. http://www.artzstudio.com/2009/04/jquery-performance-rules/