CSS naming rules for team collaboration

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

ArticleList: List

Message: msg

TIPS: Tips

Topic title: Title

Join: joinus

Guide: Guild

Service: Service

Registration: regsiter

Status: Status

Vote: Vote

Partner: Partner

(2) Comment writing:

/* Footer */

Content Area

/* End footer */

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

(4) Class naming:

(1) color: use the color name or hexadecimalCode, Such

. Red {color: red ;}

. F60 {color: # f60 ;}

. Ff8600 {color: # ff8600 ;}

(2) font size: Use "font + font size" as the name, as shown in figure

. 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) use the "category + function" method to name the title bar style, as shown in figure

. Barnews {}

. Barproduct {}

Note ::

1. All are in lower case;

2. Try to use English;

3. Do not add hyphens or underscores;

4. Try not to be abbreviated, except words that can be understood without looking at them.

Main master.css

Module module.css

Basic shared base.css

Layout.css

Themes.css

Columns.css

Text font.css

Form forms.css

Patch mend.css

Print print.css