[Transfer] Web UI design naming convention_html/css_WEB-ITnose

Source: http://blog.bingo929.com/web-ui-design-name-convention.html

1. Website design and basic framework structure:

1. Container
"container" is the part that wraps all the elements in the page together. This part can also be named: "wrapper", "wrap", "page".
2. Header
“Header” is the head area of ​​the website page. Generally speaking, it contains the website’s logo and some 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", "nav-wrapper".
4. Menu
The "Menu" area contains general links and menus. This part 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 the log. This section can also be named: “content“, “main-content” (or “mainContent”).
6. Sidebar
The “Sidebar” part can contain secondary content of the website, such as a list of recently updated content, an introduction to the website or advertising elements, etc… This part can also be named: “subNav “, “side- panel", "secondary-content".
7. Footer
"Footer" contains some additional information about the website. This part can also be named: "copyright".

2. Things to note A few points:

1. Try to name the element with its own function or "intention" to achieve semantics. Do not use superficial naming.
such as: red/left/big, etc.

2. Combination naming rules:
[Element type]-[Element function/content]
For example: search button: btn-search
Login form: form-login
News List: list-news

3. Naming of elements involving interactive behaviors:
Elements involving interactive behaviors usually have different styles such as normal, hover, click, and browsed. For naming, please refer to the following Rules:
Mouse hover:: hover Click: click Viewed: visited
Such as: search button: btn-search, btn-search-hover, btn-search-visited