Child pages
  • M5 HtmlVaadin Naming & Code Conventions
Skip to end of metadata
Go to start of metadata

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

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

Overview:

(Login)
#login

(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
#user

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.

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/

  • No labels