The well-organized css naming rules on the internet provide reference for css code standardization and increase code readability.
Id:
(1) Page Structure
Container: container header: header content: content/container
Page subject: main, footer: footer, navigation: nav
Sidebar: sidebar column: left and right column: leftright center
Overall Layout width of the page peripheral control: wrapper
(2) Navigation
Navigation: nav
Main navigation: mainbav
Subnavigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu Sub-menu: submenu title: title Abstract: summary
(3) Functions
Logo: logo
Advertisement: banner
Login: login
Logon entry: loginbar
Registration: regsiter
Search: search
Functional Area: shop
Title: title
Join: joinus
Status: status
Button: btn
Scroll: scroll
Tab: tab
Article list: list
Message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hotspot: hot
News: news
Download: download
Vote: vote
Partner: partner
Link
Copyright: copyright
Class Name: (1) color: use the color name or hexadecimal code, such
. Red {color: red ;}
. F60 {color: # f60 ;}
. Ff8600 {color: # ff8600 ;}
(2) font size: Use "font + font size" as the name, such
. Font12px {font-size: 12px ;}
. Font9pt {font-size: 9pt ;}
(3) alignment style. Use the English name of the alignment target, as shown in figure
. Left {float: left ;}
. Bottom {float: bottom ;}
(4) The title bar style is named by "category + function", as shown in figure
. Barnews {}
. Barproduct {}
Note:
1. Class names and id names in upper case are not used;
2. Try to use a combination of descriptive English words as the class name and id name;
3. Separate multiple English words of the id and class names with a hyphen;
4. Describe by region. Example: main01_div01_ul01 (it can be understood as the first UL under the first DIV in the first region of the subject)
Appendix: reference for naming CSS frameworks
Main master.css module module.css basic use base.css
Themes.css column columns.css print print.css
Text font.css form forms.css patch mend.css
Layout.css