Web page standard normalization css+xhtml naming reference

css|xhtml| Standard | reference | standardization | Web page

CSS naming rules

Header: Header
Content: Content/containe
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

Name of ID in XHTML file

(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

Name of class in XHTML file

(1) Color: Use the name of the color or the 16 code, such as (not recommended to name the performance)
. 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 {}

other relevant considerations

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