Header: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left and center: left right center
Login bar: loginbar
Logo: logo
Advertising: banner
Page body: main
Hotspot: hot
News: news
Download: download
Subnav: subnav
Menu: menu
Submenu: submenu
Search: search
Friendly link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tab: tab
Article list: list
Prompt message: msg
Tips: tips
column Title: title
Join: joinus
Guide: guide
Service: service
Registration: register
Status: status
Vote: vote
Partner: partner
(2) Comment writing:
/* Header */ 内容区 /* End Header */
(3) ID naming:
(1) Page structure
Container: container
Header: header
Content: content/container
Page body: main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
left right center
(2)Navigation
Navigation: nav
Main navigation: mainbav
Subnav: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Submenu: submenu
Title: title
Summary: summary
(3) Function
Logo: logo
Advertising: banner
Login: login
Login bar: loginbar
Registration: register
Search: search
ribbon : shop (like shopping cart)
title: title
join: joinus
status: status
button: btn
scroll :scroll
Tab page: tab
Article list: list
Prompt message: msg
Current: current
Tips :tips
icon: icon
note: note
guide: guide
service: service
hotspot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly link: link
Copyright: copyright
(4) Class naming:
(1) Color: use the color name or hexadecimal code, such as
.red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }
(2) Font size, directly use "font font size" as the name, such as
.font10px { font-size: 10px; } .font6pt {font-size: 6pt; }
(3) Alignment style, use the English name of the alignment target, such as
.left { float:left; } .bottom { float:bottom; }
(4) Title Column style, use the "category function" method to name, such as
.barnews { } .barproduct { }
Note::
I prefer the simple and elegant style of bootstrap. So you can also refer to css naming.