Div+css Canonical Naming Encyclopedia collection

standard usage in Web page making Div+css naming rules that can improve the effectiveness of optimization especially when teamwork can provide collaborative production efficiency, specific DIV CSS Naming conventions css naming encyclopedia content article.

I. Description of the naming rules:

1), all the names 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 end, and to have the correct level, typesetting has a regular neat 4), Empty element to have the end of the tag or after the beginning of the tag with "/" 5), performance and structure completely separated, the code does not involve any of the performance elements, such as style, font, bgColor, border, etc. 6),<H1  > to <h5> definition, should follow the principle from large to small, reflect the structure of the document, and facilitate search engine query. 7), give each table and form a unique, structural Mark Id8), add alt tag to the picture 9), try to use the English naming principle 10), as far as possible, not abbreviated, unless a look to understand the word

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

Coat wrap------------------used for the outermost header----------------the main content of the head is------------used for the main content (middle) left Main-left------------ -Left layout right main-right-----------right Layout nav bar nav-----------------web Menu navigation bar content---------------used for the bottom footer of the main body of the Web page-------- ---------for Bottom

Three, Div+css named reference table:

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
Layout, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css

Four, English naming skills:

If you encounter infrequently used, you can use the translation tool to translate the English name.
Recommended Google online Translator tool: http://translate.google.cn/

Div+css Canonical Naming Encyclopedia collection