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


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.



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

#app-page-editor (Should sub apps be named/treated differently?)

Details of elements

(Shell Header)

Parts of the shell header

Parts of an App (App Header) (Actionbar) (View options) (Content area)


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.


Use Appropriate HTML5 semantic elements where possible

When using a div or span as a button - add roll="button" attribute to the tag.
Consider using some of the other role tags.

Coding Standards:


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.


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)


When selecting a set of elements, where possible specify an id first to narrow the DOM search tree.

  • No labels