Skip to content

Instantly share code, notes, and snippets.

@hosuaby
Last active October 3, 2022 06:58
Show Gist options
  • Save hosuaby/fe180dc02238c16e6be2 to your computer and use it in GitHub Desktop.
Save hosuaby/fe180dc02238c16e6be2 to your computer and use it in GitHub Desktop.
Simple convention for naming GUI elements of Web applications

Simple convention for naming GUI elements of Web applications

Ids or names of elements (primitives or complexes) must be written in Camel Case and must to be as short as possible. All id or name must to start with one of the defined element type prefixes.

Element type prefixes

All element ids or names must use Hungarian notation to incorporate the type of element. Prefixes are used to indicate the semantic type of the element, rather than it's underlining implementation. It means that the element of GUI with button look & feel must prefixed as btn, regardless of how it is implemented, with tag <button> or with tag <a>.
Prefixes are lowercase strings of 2, 3 or 4 characters. Here a complete list of authorised prefixes:

  • btn - the button or a link with a button look & feel
  • cell - table cell
  • chk - input of type checkbox
  • chr - chart
  • dtp - date picker
  • err - error message text
  • form - form
  • ft - footer
  • hd - header
  • help - help message
  • hint - popup hint, placeholder or any hint message
  • info - info message
  • item - list, menu or combo box item
  • lbl - label
  • link - HTML link (for link with button look & feel use btn)
  • list - list
  • menu - menu
  • mod - modal
  • msg - message text (for error message use err)
  • rad - input of type radio button
  • step - step of wizard
  • tab - tab
  • tbl - table
  • wdg - widget

Rules to define a new prefix

New prefix must define a GUI element from semantic point of view. Generally used tags like <span> and <div> have no their prefixes because they are just helpers to create the GUI components but no GUI components themselves.
Normal length of the prefix is 3 characters. In some rare cases the prefix can be written of 2 characters (if there is commonly used abbreviations on 2 characters). Instead, if the whole element's name can be written with 4 characters, it must be keep as the prefix.

References

  1. http://stackoverflow.com/questions/1743467/wpf-ui-element-naming-conventions
  2. http://programmers.stackexchange.com/questions/14789/what-is-the-appeal-of-systems-hungarian
  3. https://msdn.microsoft.com/en-us/library/aa263493(v=vs.60).aspx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment