CSS naming rules: Code specification for picture-cut-and-go pages

Article Introduction: DIV+CSS naming rules in the process of Web page slicing.

Online collation of the better CSS naming rules for the standardization of CSS code to do a reference to increase the readability of the code.

Name of ID:
(1) Page structure
Containers: Container Header: Header content: Content/container
Page body: Main Page end: Footer Navigation: Nav
Sidebar: Sidebar column: Column around: Left Right center
Page perimeter control overall layout width: Wrapper

(2) Navigation
Navigation: Nav
Main navigation: MAINBAV
Sub-navigation: Subnav
Top Navigation: Topnav
Edge Navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Menus: Menu submenu: submenu title: Title Abstract: summary

(3) function
Logo: Logo
Advertisement: Banner
Login: Login
Login Bar: Loginbar
Registration: Regsiter
Search on: Search
Functional area: Shop
Titles: Title
Add: Joinus
State: Status
Button: BTN
Scrolling: Scroll
tab page: Tab
Article listing: List
Tip Message: Msg
Currently: current
Tips: Tips
Icons: Icon
NOTES: note
Guide: Guild
Services: Service
Hotspot: Hot
News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyrights: Copyright

name of class:
(1) Color: Use the name of the color or the 16 code, such as
. red {color:red;}
. F60 {color: #f60;}
. ff8600 {color: #ff8600;}
(2) Font size, directly using "font+ font size" as a name, such as
. font12px {font-size:12px}
. font9pt {FONT-SIZE:9PT}
(3) Alignment style, using the English name of the alignment target, such as
. left {float:left;}
. Bottom {Float:bottom}
(4) title bar style, using the "category + Features" way to name, such as
. Barnews {}
. barproduct {}

Precautions :
1. Do not use uppercase form of class name and ID name;

2. Use a combination of descriptive English words whenever possible as a class name and ID name;

3.id name and class name of a number of English words between the use of "_" short horizontal separation;

4. According to the area of the description number example: MAIN01_DIV01_UL01 (can be understood as the first area of the main div under the first ul)

Attached: A naming reference for some CSS frames

The main MASTER.CSS module MODULE.CSS basic Common Base.css
Theme themes.css Column COLUMNS.CSS print print.css
Text font.css form Forms.css Patch Mend.css
layouts, Layout layout.css