Naming rules for Web UI design

1.Container
"Container" is the part that includes all elements in the page. This part can also be named "wrapper", "wrap", "page".
2.Header
"Header" is the header area of a website page. Generally, it contains the Website logo and other elements. This part can also be named "page-header" (or pageHeader ).
3.Navbar
"Navbar" is equivalent to a horizontal navigation bar and is the most typical web page element. This part can also be named "nav", "navigation", and "nav-wrapper ".
4.Menu
The "Menu" area contains general links and menus, which can also be named "subNav", "links", "sidebar-main ".
5.Main
"Main" is the Main area of the website. If it is a blog, it will contain logs. This part can also be named "content", "main-content" (or "mainContent ").
6.Sidebar
The "Sidebar" section can contain secondary content of the website, such as the list of recently updated content, Introduction to the website, or advertisement elements... This part can also be named "subNav", "side-panel", "secondary-content".
7.Footer
"Footer" contains some additional information about the website, which can also be named "copyright".

1. Consider the role or "intention" of naming an element as much as possible to achieve semantics. Do not use surface naming.
For example, red/left/big.

2. Combination naming rules:

For example, search button: btn-search
Logon form: form-login
News list: list-news

3. element names involving interactive behaviors:
Elements that involve interaction usually have different styles, such as normal, hover, click, and browsed. for naming rules, refer to the following:
Hover: hover click: click browsed: visited
Such as: search button: btn-search, btn-search-hover, btn-search-visited