div css style naming rules, worth collecting_html/css_WEB-ITnose

div css style naming rules, worth collecting

Header: header
Content: content/container
Tail: footer
Navigation: nav
Side Column: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center: left right center
Login bar: loginbar
Logo: logo
Advertisement: banner
Main page: main
Hotspot: hot
News: news
Download: download
Sub-navigation: subnav
Menu: menu
Sub-menu: submenu
Search: search
Friendly link: friendlink
Footer: footer
Copyright: copyright
Scroll: scroll
Content: content
Tag: tab
Article list: list
Prompt message : msg
Tips: tips
Column title: title
Join: joinus
Guide: guild
Service: service
Registration: regsiter
Status: status
Vote: vote
Partner: partner

How to write comments

/* Footer */
Content area
/* End Footer */

Naming of id
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 and right center: left right center
Name of id

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

Navigation

Navigation: nav
Main navigation: mainbav
Sub-navigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Submenu: submenu
Title: title
Summary: summary

Function
Logo: logo
Advertisement: banner
Login: login
Login bar: loginbar
Registration: regsiter
Search: search
Ribbon ：shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab: tab
Article list: list
Tips Information: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly link: link
Copyright: copyright

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
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3) Alignment style, use the English name of the alignment target, such as

.left { float:left; }
.bottom { float:bottom; }

(4) Title bar style, use the "category function" method to name, such as
.barnews { }
.barproduct { }

Notes

1. All lowercase ;
2. Use English as much as possible;
3. Do not add dashes and underlines;
4. Try not to abbreviate words unless they are easy to understand at a glance.
Main master.css
Module module.css
basically shares base.css
layout, layout.css
themes.css
columns columns.css
text font.css
forms.css
Patch mend.css
Print print.css