CSS Naming conventions

I. Description of naming rules

1), all the names are preferably lowercase
2), the value of the attribute must be enclosed in double quotation marks (""), and must have values such as class= "DIVCSS5", id= "DIVCSS5"
3), each label must have the beginning and the end, and must have the correct level, the layout has the regularity neatly
4), empty element to have the end of the tag or after the beginning of the tag plus "/"
5), performance and structure are completely separated, the code does not involve any expression elements, such as style, font, bgColor, border, etc.
6), 7), add a unique, structure tag ID to each table and form
8), add alt tag to picture
9), to use the English naming principle as far as possible
10), as far as possible not abbreviated, unless a look to understand the word

DIVCSS5 introduces common CSS naming and div CSS naming methods.

Second, relative to the page of the important part of the CSS style name:-TOP

Coat Wrap------------------for the outermost
Head Header----------------for head
Primary content main------------for main content (middle)
Left Main-left-------------left layout
Right Main-right-----------Right layout
Navigation Bar nav-----------------web Menu navigation bar
Content---------------for the middle body of a Web page
Bottom footer-----------------for bottom

Three, Div+css name reference table:-TOP

The following is a CSS style naming reference table with CSS files, a DIV CSS named collection:

CSS style naming	Description
Web page public naming
#wrapper	Page perimeter control Overall layout width
#container或 #content	container, for outermost
#layout	Layout
#head, #header	Page Head points
#foot, #footer	Footer section
#nav	Main navigation
#subnav	Second-level navigation
#menu	Menu
#submenu	Sub-Menu
#sideBar	Side bar
#sidebar_a, #sidebar_b	Left column or right column
#main	Page body
#tag	Label
#msg #message	Prompt information
#tips	Little Tricks
#vote	Vote
#friendlink	Friendship Connection
#title	Title
#summary	Summary
#loginbar	Login Bar
#searchInput	Search Input Box
#hot	Popular hot Spots
#search	Search
#search_output	Search output is similar to search results
#searchBar	Search bar
#search_results	Search results
#copyright	Copyright information
#branding	Trademark
#logo	Website Logo logo
#siteinfo	Website Information
#siteinfoLegal	Legal Notices
#siteinfoCredits	Credibility
#joinus	Join us
#partner	Our Partners
#service	Service
#regsiter	Registered
Arr/arrow	Arrow
#guild	Guide
#sitemap	Site Map
#list	List
#homepage	Home
#subpage	Level two page face page
#tool, #toolbar	Tool bar
#drop	Drop down
#dorpmenu	Drop-down menu
#status	State
#scroll	Rolling
. tab	tab page
. Left. Right. Center	Left, centre, and right
. News	News
. download	Download
. Banner	Banner (top ad bar)
E-commerce related
. Products	Products
. products_prices	Product price
. products_description	Product Description
. Products_review	Product Reviews
. Editor_review	Edit a Comment
. news_release	Latest Products
. publisher	Manufacturers
. screenshot	Thumbnail images
. FAQs	Problems
. keyword	Keywords
. Blog	Blog
. Forum	Forum

css file naming	Description
Master.css,style.css	of the main
Module.css	Module
Base.css	Basic common use
Layout.css	Layout, layout
Themes.css	Theme
Columns.css	Column
Font.css	Text, Font
Forms.css	Form
Mend.css	Patch
Print.css	Print

CSS naming other instructions:

div+css naming Summary : either use "." (lowercase period) It doesn't matter whether you choose the beginning of the symbol or the name of the "#" selection symbol, but we'd better follow the main , important , special , outermost box with "#" (Pound sign) Select the symbol at the beginning of the name and the others with "." (Lowercase period) Select the symbol at the beginning of the name, taking into account that the named CSS selector reuses the call in HTML.

Usually we most commonly use the main name: Wrap (jacket, outermost), header (header, head), NAV (navigation bar), menu, title (column headings, general mates H1\h2\h3\h4 tags)
, Content (contents area), footer (footer, bottom), logo (logo, can be used with H1 tags), banner (banner, general at the top), copyright. Others can be used selectively depending on their needs.

DIVCSS5 advice: The main, important, outermost box is named after the "#" (pound) selection symbol, and the others are "." (Lowercase period) Select the symbol at the beginning of the name.

The 2.CSS style file is named as follows

• 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

CSS Naming conventions