Web common control naming summary

Web UI design naming convention

1. Website design and basic framework structure:

web design - naming convention
1. Container
"container" is the part that wraps all 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, which will contain the logs if it is a blog. This section can also be named: "content", "main-content" (or "mainContent").
6. Sidebar
The “Sidebar” section can contain the secondary content of the website, such as a list of recently updated content, an introduction about the website or advertising elements, etc… This section 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".

Two. Points to note:

1. Try to consider the function or "intention" of naming the element itself to achieve semantics. Do not use the name of the surface form.
Such as: red/left/big and so on.
2. Combination naming rules:
[element type]-[element function/content] such as : search button: btn
-search
login form: form-login
news list: list-news Behavior elements usually have different styles such as normal, hover, click and browsed. The naming can refer to the following rules: mouseover: hover click: click browsed: visited such as: search button: btn-search, btn-search -hover, btn-search-visited 3. Photoshop layer structure specification: Photoshop layer naming follows the tree structure, if the layer composed of an element is greater than 3 layers, it can form a group, all layers try to avoid using the default naming ( layer + number). The first-level layer structure is as follows: web-ui-design-standard Second -level structure legend (hospital website): web design-tutorial Third -level structure legend and rendering comparison (hospital news column): web design- rendering Rendering photoshop-web design-tutorial




















Layer naming structure

IV . Summary of common names:
header: header
login bar: loginbar
logo: logo
side bar: sidebar
advertisement bar: banner
navigation: nav
sub-navigation: subNav
menu: menu
sub-menu: subMenu
drop-down menu: dropMenu
toolbar: toolbar
form: form
column: columnarrow
:arrowSearch :
searchSearch
button:btn-searchScroll
bar:scroll
content:content
tab:tabArticle
list:
listTips:msgTips
:tipsColumn
title:titleLinks
:linksFooter
:footerService
:service
hot: hot
news: news
download: download
registration: regsiter
status: status
button: btn
vote: vote
Partner: partner
Copyright: copyright
Sitemap: sitemap