Home > Article > Web Front-end > Common css naming rules_html/css_WEB-ITnose
Common css naming rules_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:39:241057browse
Common css naming rules
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::
- all lowercase;
- try to use English;
- No dashes or underlines;
- Try not to abbreviate;
I prefer the simple and elegant style of bootstrap. So you can also refer to css naming.