Common naming conventions for CSS class, ID, and CSS file names
(i) Common CSS naming conventions
Head: Header
Content: Content/container
Tail: Footer
Navigation: Nav
Sidebar: Sidebar
Column: Column
Page perimeter control overall layout width: Wrapper
Middle: Left Right center
Login Strip: Loginbar
Logo: Logo
Ad: Banner
Page body: Main
Hotspot: Hot
Press: News
Download: Download
Sub-navigation: Subnav
Menus: Menu
Sub-menu: submenu
Searches: Search
Links: Friendlink
Footer: Footer
Copyrights: Copyright
Scrolling: Scroll
Contents: Content
Tabs page: Tab
Article List: List
Hint Message: MSG
Tip: Tips
Column Title: Title
Join: Joinus
Guide: Guild
Services: Service
Registration: Regsiter
State: Status
Vote: Vote
PARTNER: Partner
(b) The wording of the note:
/* Footer */
Content Area
/* End Footer */
(c) The name of the 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
Middle: Left Right center
(2) Navigation
Navigation: Nav
Main navigation: MAINBAV
Sub-navigation: Subnav
Top Navigation: Topnav
Side navigation: Sidebar
Left navigation: Leftsidebar
Right navigation: Rightsidebar
Menus: Menu
Sub-menu: submenu
Caption: Title
Abstract: Summary
(3) function
Logo: Logo
Ad: Banner
Login: Login
Login Strip: Loginbar
Registration: Regsiter
Searches: Search
Functional area: Shop
Caption: Title
Join: Joinus
State: Status
Button: BTN
Scrolling: Scroll
Tabs page: Tab
Article List: List
Hint Message: MSG
Present: Current
Tip: Tips
Icons: Icon
Note: note
Guide: Guild
Services: Service
Hotspot: Hot
Press: News
Download: Download
Vote: Vote
PARTNER: Partner
Links: Link
Copyrights: Copyright
(d) Name of class:
(1) Color: Use the name of the color or the 16 code, as shown in
. red {color:red;}
. F60 {color: #f60;}
. ff8600 {color: #ff8600;}
(2) Font size, directly using "font+ font size" as the name, 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, named using "Category + function", as
. Barnews {}
. barproduct {}
Precautions::
1. Lowercase;
2. Try to use English;
3. Do not add the middle bar and underline;
4. Try not to abbreviate unless you see the words clearly.
The main master.css
Module MODULE.CSS
Basic shared Base.css
Layout, Layout layout.css
Theme Themes.css
Column Columns.css
Text Font.css
Form Forms.css
Patch Mend.css
Print Print.css
A class or ID naming rule in a CSS file:
1) Lowercase letters at the beginning
2) Try not to use abbreviations in English unless you have a glance
3) If you encounter a difference of class or ID, the main function recognition letter in front, position recognition letter after the position recognition letter first can be capitalized (such as: Navtop,menuleft)
4) must start with English
CSS file content annotation notation:
CSS file Content Annotation Unified Adoption:
/*
Comment Content
*/
CSS File storage location:
All CSS files are stored uniformly, for example, under the style directory in the root directory.
Common naming conventions for CSS class, ID, and CSS file names