...
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
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/