Div+css Canonical Naming Encyclopedia collection

(from the already dead time and again finally hung out of the Baidu space manually rescued, published on 2014-06-19)

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.

Common div+css named Daquan collections, which are CSS naming conventions

DIV CSS Naming directory

1. Naming rules Description

2. Important CSS Naming

3. CSS Naming reference table

4. Naming tips

When we develop the Css+div Web page (Xhtml), the more confused and tangled thing is the CSS naming, especially the novice do not know where to name, how to name is a good way.

I. Description of the 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

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

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 named reference table:

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

CSS style naming instructions

Web page public naming

#wrapper page Perimeter controls overall layout width

#container或 #content Container for outermost

#layout layout

#head, #header the head of the page

#foot, #footer footer section

#nav Main navigation

#subnav Level Two navigation

#menu Menu

#submenu Sub-Menu

#sideBar Side Bar

#sidebar_a, #sidebar_b left column or right column

#main page Body

#tag tags

#msg #message Tip Information

#tips Tips

#vote votes

#friendlink Friendly 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 website Logo logo

#siteinfo website Information

#siteinfoLegal Legal Notices

#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 drop down

#dorpmenu drop-down menu

#status status

#scroll scrolling

. tab tab page

. Left, right, center.

. News

. download Download

. Banner Banner (top ad bar)

E-commerce related

. Products

. Products_prices Product Price

. Products_description Product Description

. Products_review Product Reviews

. Editor_review Editorial Review

. news_release Latest Products

. Publisher manufacturer

. screenshot thumbnail Image

. FAQs Frequently Asked Questions

. Keyword Keywords

. Blog Blogs

. Forum Forums

CSS file naming

Master.css,style.css the main

MODULE.CSS Module

BASE.CSS Basic Common use

Layout.css layout, layouts

Themes.css Themes

COLUMNS.CSS column

Font.css text, Font

Forms.css form

MEND.CSS Patch

PRINT.CSS Printing

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.

I add the label: In general, the site home page and the layout of the interior is not the same, but the broad categories of columns have. Then the name needs to be echoed in the inner page but cannot be repeated. So we use:

Top, Topper,head, Header,content, contenter,foot, footer this form

Or

Top, Itop,head, Ihead,content, Icontent,foot, ifoot this form

To differentiate the div from the home page. (the latter is named for the page, itop = = index_top)

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.

The above is a summary of the naming rules of DIV+CSS, I believe that through the specification of CSS naming to you later Web site maintenance to bring convenience.

Article turned from: http://www.divcss5.com/jiqiao/j4.shtml

"Personal Collection"

Div+css Canonical Naming Encyclopedia collection