Common css naming rules and css naming rules

[Go] common css naming rules and css naming rules
Common css naming rules

Header: header

Content: content/container

End: footer

Navigation: nav

Sidebar: sidebar

Column: column

Overall Layout width of the page peripheral control: wrapper

Left right center

Logon entry: loginbar

Logo: logo

Advertisement: banner

Page subject: main

Hotspot: hot

News: news

Download: download

Subnavigation: subnav

Menu: menu

Sub menu: submenu

Search: search

Link: friendlink

Footer: footer

Copyright: copyright

Scroll: scroll

Content: content

Tab: tab

Article list: list

Message: msg

Tips: tips

Topic title: title

Join: joinus

Guide: guide

Service: service

Registration: register

Status: status

Vote: vote

Partner: partner

(2) Comment writing:

/* Header */content area/* End Header */

(3) id name:

(1) Page Structure

Container: container

Header: header

Content: content/container

Page subject: main

Footer: footer

Navigation: nav

Sidebar: sidebar

Column: column

Overall Layout width of the page peripheral control: wrapper

Left right center

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

Search: search

Functional Area: shop (such as shopping cart)

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

Service: service

Hotspot: hot

News: news

Download: download

Vote: vote

Partner: partner

Link

Copyright: copyright

(4) class naming:

(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, as shown in figure

.font10px { font-size: 10px; }.font6pt {font-size: 6pt; }

(3) alignment style. Use the English name of the alignment target, as shown in figure

.left { float:left; }.bottom { float:bottom; }

(4) use the "category + function" method to name the title bar style, as shown in figure

.barnews { }.barproduct { }

Note ::

I like the simple and elegant bootstrap style. For more information about css naming, see.

Attached original address: http://www.cnblogs.com/WebShare-hilda/p/4686067.html