Div css naming rules during web page cutting process
Content: content/container Navigation: nav Sidebar: sidebar
Column: column Logo: logo Page body: main
Advertisement :banner Hotspot: hot News: news
Download: download Sub-navigation: subnav Menu: menu
Search: search Footer: footer Scroll: scroll
Copyright: copyright Friendly link: friendlink Submenu: submenu
Content: content Tag page: tab Article list: list
Registration: regsiter Prompt message: msg Tips: tips
Join: joinus Column title: title Guide: guild
Service: service Status: status Vote: vote
Tail: footer Partner: partner Login bar: loginbar
Page peripheral control overall layout width: wrapper Left right center: left right center
(2) Comment writing:
/* Footer */
Content area
/* End Footer */
(3) Naming of id:
(1) Page structure
Container: container Header: header content: content/container
Page body: main Page footer: footer Navigation: nav
Sidebar: sidebar Column: column Left right center: left right center
Page peripheral control overall layout width: wrapper
(2) Navigation
Navigation: nav
Main navigation: mainbav
Sub navigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation :rightsidebar
Menu: menu Submenu: submenu Title: title Summary: summary
(3) Function
Logo: logo
Advertisement: banner
Login: login
Login bar: loginbar
registration: regsiter
search: search
ribbon: shop
title: title
join: joinus
status: status
button: btn
scroll :scroll
Tab page: tab
Article list: list
Prompt message: msg
Current: current
Tips: tips
Icon: icon
Note: note
Guide: guild
Service: service
Hot spot: hot
News: news
Download: download
Vote: vote
Partner: partner
Friendly link: link
Copyright: copyright
(4) Class naming:
(1) Color: Use the name of the color or hexadecimal code, such as
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2) Font size, directly use "font font size" as the name, such as
.font12px { font- size: 12px; }
.font9pt {font-size: 9pt; }
(3) Alignment style, use the English name of the alignment target, such as
.left { float:left; }
. bottom { float:bottom; }
(4) Title bar style, named using "category function", such as
.barnews { }
.barproduct { }
Notes:
1. Always lowercase;
2. Use English as much as possible;
3. Do not add dashes or underlines;
4. Try not to abbreviate words unless they are words that are easy to understand at a glance.
Mainly master.css module module.css basically shares base.css
themes themes.css columns columns.css print print.css
text font.css form forms.css patch mend.css
layout, layout .css