Home > Article > Web Front-end > Commonly used CSS naming rules_html/css_WEB-ITnose
Commonly used CSS naming rules_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:09838browse
Head: header
Content: content/container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left and right center: left right center
Login bar: loginbar
Logo: logo
Advertisement: banner
Page body: 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
Tab: 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
(2) How to write comments:
/* Footer */
Content area
/* End Footer */
(3) Naming of id:
(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 and right center: left right center
(2) 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
(3) Function
Logo: logo
Advertising: 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
Prompt message: 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
(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
.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, named using "category function", such as
.barnews { }
.barproduct { }
Notes::
1. Always lowercase;
2. Use English as much as possible;
3. Do not add dashes and underlines;
4. Try not to abbreviate unless it is clear at a glance Word.
Main master.css
Module module.css
Basic common base.css
Layout, layout layout.css
Themes themes.css
Columns columns.css
Text font.css
Forms forms.css
Patch mend.css
Print print.css