Home  >  Article  >  Web Front-end  >  [Transfer] Web UI design naming convention_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 12:34:041067browse

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn