The common CSS naming rules in web standardization design environment

Common CSS naming rules

Header: Header

Content: Content/container

Tail: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Left Right Center

Login Bar: Loginbar

Logo: Logo

Advertisement: Banner

Page body: Main

Hotspot: Hot

News

Download: Download

Sub-navigation: Subnav

Menus: Menu

Sub-menu: submenu

Search on: Search

Friendship Link: friendlink

Footer: Footer

Copyrights: Copyright

Scrolling: Scroll

Contents: Content

tab page: Tab

Article listing: List

Tip Message: Msg

Tips: Tips

Column Title: Title

Add: Joinus

Guide: Guild

Services: Service

Registration: Regsiter

State: Status

Vote: Vote

PARTNER: Partner

(ii) The wording of the note:

* Footer * *

Content Area

/* End Footer * *

(iii) name of ID:

(1) Page structure

Container: Container

Page Header: Header

Content: Content/container

Page body: Main

Page End: Footer

Navigation: Nav

Sidebar: Sidebar

Column: Column

Page perimeter control overall layout width: Wrapper

Left Right Center

(2) Navigation

Navigation: Nav

Main navigation: MAINBAV

Sub-navigation: Subnav

Top Navigation: Topnav

Edge Navigation: Sidebar

Left navigation: Leftsidebar

Right navigation: Rightsidebar

Menus: Menu

Sub-menu: submenu

Titles: Title

Summary: summary

(3) function

Logo: Logo

Advertisement: Banner

Login: Login

Login Bar: Loginbar

Registration: Regsiter

Search on: Search

Functional area: Shop

Titles: Title

Add: Joinus

State: Status

Button: BTN

Scrolling: Scroll

tab page: Tab

Article listing: List

Tip Message: Msg

Currently: current

Tips: Tips

Icons: Icon

NOTES: note

Guide: Guild

Services: Service

Hotspot: Hot

News

Download: Download

Vote: Vote

PARTNER: Partner

Links: Link

Copyrights: Copyright

(iv) Class name:

(1) Color: Use the name of the color or the 16 code, such as

. red {color:red;}

. F60 {color: #f60;}

. ff8600 {color: #ff8600;}

(2) Font size, directly using "font+ font size" as a name, such as

. font12px {font-size:12px}

. font9pt {FONT-SIZE:9PT}

(3) Alignment style, using the English name of the alignment target, such as

. left {float:left;}

. Bottom {Float:bottom}

(4) title bar style, using the "category + Features" way to name, such as

. Barnews {}

. barproduct {}

Precautions::

1. All lowercase;

2. Use English as much as possible;

3. Do not add the middle bar and underline;

4. Try not to abbreviate, unless a look at the words understood.

The main master.css

Module MODULE.CSS

Basic shared Base.css

layouts, Layout layout.css

Theme Themes.css

Column Columns.css

Text Font.css

Form Forms.css

Patch Mend.css

Print Print.css