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.
Note that # and . names refer to the actual id and class of elements in HTML.
#shellapp-appslauncher (Apps Launcher)
#app-page-editor (Should sub apps be named/treated differently?)
Details of elements
Parts of the shell header
Parts of an App
section.app-header (App Header)
section.app-view-options (View options)
section.app-content-area (Content area)
1. What is the order of words in element specifiers?
*English order: .list-view-button
*Categorization order: .btn-view-list
2. Use abbreviations sometimes- or full words?
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.
Use Appropriate HTML5 semantic elements where possible
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.
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.
Unless the variable is trivial - start the name with a letter representing type:
elDiv (el represents a DOM element)
$elDiv ($el represents a jQuery DOM element)
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/