Front end div+css Naming code Encyclopedia

Web page production specification using DIV+CSS naming rules, can improve the efficiency of optimization, especially when team cooperation can provide cooperation in the production of efficient, specific div CSS naming rules css naming encyclopedia content.


When we develop CSS+DIV Web pages (Xhtml), the more confusing and tangled thing is the CSS naming, especially the novice does not know where to name, how to name the Good method.
First, the naming rule description:-top

1), all the best names are lowercase
2), the value of the property must be enclosed in double quotes (""), and must have values such as class= "DIVCSS5", id= "DIVCSS5"
3, each label must have the beginning and the end, and to have the correct level, layout has a regular neat
4), empty elements to have the end of the tag or after the start of the tag plus "/"
5, performance and structure completely separated, the code does not involve any performance elements, such as style, font, bgcolor, border, etc.
6, 7), each table and form plus a unique, structural tag ID
8), add alt label to picture
9. Use English naming principles as far as possible
10), as far as possible, not abbreviations, unless a look at the words understood

DIVCSS5 to introduce common CSS naming and div CSS naming methods.
Second, relative to the outer part of the page CSS style name:-Top

Coat Wrap------------------for 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-----------------Page Menu navigation bar
Contents content---------------used in the middle of a Web page body
Bottom footer-----------------for bottom
Third, Div+css named reference table:-Top

The following is a CSS style naming and CSS file naming reference table, DIV CSS naming collection:

CSS style naming descriptions
Web page public naming
#wrapper the perimeter of the page to control the overall layout width
#container或 #content Container for outermost
#layout layout
#head, #header page head points
#foot, #footer footer section
#nav Leading navigation
#subnav Level Two navigation
#menu Menu
#submenu submenu
#sideBar Side Bar
#sidebar_a, #sidebar_b the left or right column
#main page Body
#tag Label
#msg #message Hint Information
#tips Tips
#vote vote
#friendlink Friendship Connection
#title Title
#summary Summary
#loginbar Login Bar
#searchInput Search Input Box
#hot Hot Spots
#search Search
#search_output search output is similar to search results
#searchBar Search Bar
#search_results Search Results
#copyright Copyright Information
#branding trademarks
Logo logo for #logo website
#siteinfo website Information
#siteinfoLegal Legal Statement
#siteinfoCredits reputation
#joinus Join us
#partner Partners
#service Services
#regsiter Registration
Arr/arrow Arrow
#guild Guide
#sitemap Site Map
#list List
#homepage Home
#subpage Level two page face page
#tool, #toolbar tool bar
#drop pull down.
#dorpmenu drop down Menu
#status status
#scroll scrolling
. tab label page
. Left, right. Center
. News Press
. download Download
. Banner Banner (top advertising strip)
e-Trade-related
. Products
. Products_prices Product Price
. Products_description Product Description
. Products_review Product Reviews
. Editor_review Editorial Reviews
. news_release Latest Product
. Publisher manufacturer
. Screenshot thumbnails
. FAQs FAQ
. Keyword Keywords
. Blog Blog
. Forum Forum

CSS file naming instructions
Master.css,style.css the main
MODULE.CSS Module
BASE.CSS Basic Common use
Layout.css layouts, Suites
THEMES.CSS Theme
COLUMNS.CSS column
Font.css text, Font
Forms.css form
MEND.CSS Patch
PRINT.CSS Printing

CSS name Other Description:

DIV+CSS Naming Summary: either use the "." (Lowercase period) Select the beginning of the symbol name, it doesn't matter if you use the "#" (well number) to select the beginning of the symbol, but we'd better follow, the main, important, special, outermost box is named after the "#" ("#") selection symbol, all others are "." (Lowercase period) Select the beginning of the symbol name and consider the named CSS selector reusing the call in HTML.

Usually our most commonly used main name is: Wrap (coat, outermost), header (header, head), NAV (navigation bar), menu (menu), Title (column title, General with H1H2H3H4 tag use)
, Content (contents area), footer (footer, bottom), logo (logo, can be used with H1 label), Banner (banner, general at the top), Copyright (copyrights). Others can be used selectively according to their own needs.

DIVCSS5 suggests: The main, important, outermost box is named after the "#" (well) selection symbol, and the other uses "." (Lowercase period) Select the beginning of the symbol name.

The 2.CSS style files are named as follows

The main master.css
layouts, Layout layout.css
Column Columns.css
Text Font.css
Print style Print.css
Theme Themes.css
Four, English naming skills:-Top

If you encounter an unusual, you can use the translation tool to translate the name in English.
Recommended use Google translation tool: http://translate.google.cn/
Google translation Tool Introduction: http://www.divcss5.com/css-tool/t346.shtml

Maybe you need to know about CSS references to HTML methods

Above for the DIV+CSS naming rules summary, I believe that through the specification of the CSS name to your site after the maintenance of Web pages convenient.