Common css naming rules_html/css_WEB-ITnose

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::

1. all lowercase;
2. try to use English;
3. No dashes or underlines;
4. Try not to abbreviate;

I prefer the simple and elegant style of bootstrap. So you can also refer to css naming.