Home >Web Front-end >HTML Tutorial >[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