...

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)

Note that # and . names refer to the actual id and class of elements in HTML.

Overview:

(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

(Shell Header)
#shell-header

Parts of the shell header
#logo
#main-launcher
#userapp

Parts of an App

section.app-header (App Header)
section.app-actionbar (Actionbar)
section.app-view-options (View options)
section.app-content-area (Content area)
.btn-close
.title
.search
.views
.view-tree
.view-list
.view-thumbnail
.filters
.filter-all
.filter-images
.filter-videos
.filter-audio
.sort
.search

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.

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^{Image Removed}
Consider using some of the other role tags.

...

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/^{Image Removed}