#1 CSS Naming conventions

Source: Internet
Author: User

This article is to learn the CSS before, in order to standardize the name of CSS, looking for a note on the Internet.

Feel good, so share out to let everyone see.

Original Portal: http://www.divcss5.com/jiqiao/j4.shtml

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 naming rules:- TOP

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 "#" ( sign) Select the symbol at the beginning of the name, and the others use "." (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:- TOP

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/
Google Translator Tools Description:http://www.divcss5.com/css-tool/t346.shtml

Maybe you need to know about CSS references to HTML methods

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.

If you want to reprint, please indicate the source and origin of the article URL: http://www.divcss5.com/jiqiao/j4.shtml

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.