A summary of naming rules for SEO-optimized div+css

First, CSS file and style naming
1. css file naming specification
Global style: GLOBAL.CSS/MASTER.CSS;

Column style: Columns.css;

Theme style: Themes.css;
Frame layout: layout.css;
Font style: Font.css;
Link style: link.css;
Print style: print.css;

--------------------------------------------------

Page body: main;

Contents: Content;

Tabs: tab;

List of articles: lists;

Hint message: MSG;

Tips: Tips;

Column title: title;

Links: Friendlink;

Footer: footer;

Join: Joinus;

Guide: Guild;

Services: Service;

Hotspot: Hot;

Press: News;

Download: Download;

Registration: Regsiter;

State: status;

button: BTN;

Votes: vote;

PARTNER: Partner;

Copyrights: Copyright;

Name of the 1.CSS ID

Coat: wrap;

Main navigation: Mainnav;

Sub-navigation: Subnav;

Footer: footer;

Entire page: content;

Headers: header;

Footer: footer;

Trademark: label;

Caption: title;

Main navigation: Mainnav (GLOBALNAV);

Top navigation: Topnav;

Side navigation: Sidebar;

Left navigation: Leftsidebar;

Right navigation: Rightsidebar;

Flag log: Logo;

Slogan: Banner;

Menu content 1:menu1content;

Menu capacity: Menucontainer;

Sub-menu: submenu;

Edge navigation icon: Sidebaricon;

Note: note;

Breadcrumbs: BreadCrumb (that is, the location of the page navigation tips);

Container: container;

Contents: Content;

Searches: search;

Login: Login;

Functional area: Shop (such as shopping cart, cashier);

Present: Current;

2. CSS style naming specification

I suggest: With letters, _ Number of workers,-numbers, numbers, must start with a letter, not a pure number. In order to develop a convenient style name management, please use a meaningful word or abbreviated combination to name, so that colleagues can see that the type is probably which piece, so that the time to find the style, such as:
Head style with header, head to the left, can be used Header_left or header_l, and if the column structure can be so--box _1of3 (the first column in three columns), BOX_2OF3 (the second column in three columns), Box _3of3 (three columns in the third column), Other I do not have an example, everyone according to the above rules to name the good.
The following lists some commonly used name words convenient for everyone to use: (after everyone in the work process slowly put their accumulated words are shared out, then everyone's life will be more unified, there will be no more words of the case.) ）

Container: Container/box
Head: Header
Main navigation: Mainnav
Sub-navigation: Subnav
Top Navigation: Topnav
Website Logo: Logo
Big AD: Banner
Page Middle: mainbody
Bottom: Footer
Menus: Menu
Menu Contents: menucontent
Sub-menu: submenu
Sub-menu Contents: submenucontent
Searches: Search
Search keywords: keyword
Search Range: Range
Tag text: Tagtitle
Tag content: tagcontent
Current tag: Tagcurrent/currenttag
Caption: Title
Contents: Content
Listing: List
Current Location: Currentpath
Side bar: Sidebar
Icons: Icon
Note: note
Login: Login
Registration: Register
Column definition: column_1of3 (the first column in three columns)
COLUMN_2OF3 (second column in three columns)
COLUMN_3OF3 (third column in three columns)

Second, the use and difference of ID and class

We know that when a style sheet defines a style, you can define the ID or define the class, for example:
Id Method: #test {color: #333333}, call <div> content in page <div>
Class method:. Test{color: #333333}, calling <div class= "test" > Content <div> in the page
ID A page can be used only once, class can be referenced multiple times.
I use a number of the same ID in the IE display is also normal, the ID and class as if there is no difference, with more than the same ID have any effect?
The presence of more than one ID on a page affects the validation that cannot be done through W3.
On the page display, the current browser also allows you to make this error, with more than the same ID "in general" can also be displayed normally. But when you need to use JavaScript to control the DIV with the ID, there will be an error.
The ID is a label that distinguishes between different structures and content, like your name, and if a room has 2 people with the same name, there will be confusion;
Class is a style that can be set on any structure and content, like a garment;
Conceptually, it's not the same:
The ID is the first to find the structure/content, and then to define the style, class is to define a style, and then set to multiple structures/content.
That is to suggest that everyone in the writing xhml+css if the structure of the Koriichi of the location of the ID, or use the class bar (so that the ID of the non-structured div block to let the programmer define their own use)
Web standards want people to write code with strict habits.

Three. Using CSS Abbreviations

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules for commonly used CSS abbreviations:
Color:
16 binary color values, if each two bits of the same value, can be shortened by half, for example:
#000000可以缩写为 #000; #336699可以缩写为 #369;
Box Size:
There are usually four ways to write:
property:value1; Indicates that all edges are a value value1;
Property:value1 value2; The value representing top and bottom is the value of Value1,right and left is value2
Property:value1 value2 Value3; The value that represents top is the value of Value1,right and left is the value of Value2,bottom is Value3
Property:value1 value2 value3 value4; Four values in turn represent Top,right,bottom,left
Convenient memory method is clockwise, upper right down left. Examples of specific applications in margin and padding are as follows:
Margin:1em 0 2em 0.5em;
border (border):
The properties of the border are as follows:
border-width:1px;
Border-style:solid;
Border-color: #000;
can be abbreviated as a sentence: border:1px solid #000;
The grammar is border:width style color;
background (backgrounds):
The properties of the background are as follows:
Background-color: #f00;
Background-image:url (background.gif);
Background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
can be abbreviated as a sentence: background: #f00 URL (background.gif) no-repeat fixed 0 0;
The syntax is Background:color image repeat attachment position;
You can omit one or more of the property values, and if omitted, the value of the property will be the default value of the browser, which is:
Color:transparent
Image:none
Repeat:repeat
Attachment:scroll
position:0% 0%
Font (Fonts):
The properties of the font are as follows:
Font-style:italic;
Font-variant:small-caps;
Font-weight:bold;
Font-size:1em;
line-height:140%;
font-family: "Lucida Grande", Sans-serif;
can be abbreviated as a sentence: Font:italic small-caps bold 1em/140% "Lucida Grande", Sans-serif;
Note that if you abbreviate a font definition, you must define at least two values for font-size and font-family.
list (lists):
Cancel the default dot and ordinal can write list-style:none;
The properties of the list are as follows:
List-style-type:square;
List-style-position:inside;
List-style-image:url (Image.gif);
can be abbreviated as a sentence: List-style:square inside URL (image.gif);

Iv. clearly defined units unless the value is 0

Forgetting to define the size of the unit is a common mistake for CSS beginners. In HTML you can write only width=100, but in CSS you have to give an exact unit, for example: width:100px width:100em. Only two exceptions can be undefined units: Row heights and 0 values. In addition, the other values must be followed by the unit, note, do not add a space between the value and the unit.

Five, case-sensitive

When using CSS,CSS in XHTML, the element names defined are case-sensitive. To avoid this error, I recommend that all definition names be lowercase.
The values of class and ID are also case-sensitive in HTML and XHTML, and if you must write in mixed case, please be sure that your CSS definitions and XHTML tags are consistent.

Vi. element qualification before class and ID is canceled

When you write to an element defining class or ID, you can omit the preceding element qualification, because the ID is unique on a page, and class can be used multiple times in the page. You have no meaning in qualifying an element. For example:
div#id1{} can be written as #id1{}
This can save some bytes.

Seven, default value

The default value for padding and margin is usually 0,background-color, which is transparent. However, the default values for different browsers may be different. If you are afraid of conflict, you can define all the elements ' margin and padding values to be 0 at the beginning of the style sheet, like this:
* {
padding:0;
margin:0
}
Or it is defined for an element:
Ul,li,div,span {
padding:0;
margin:0
}

Viii. Precedence of CSS

inline style > ID selector > Style (Class), Pseudo-Class (Pseudo-class) and attribute (attribute) selector > category (Type), Pseudo-object (pseudo-element)
Explain:
* Inline style: element's Style property, such as <div style= "color:red;" ></div>, the color:red of which is the inline style
*ID selector : The id attribute of the element, such as <div></div> can be #content with the ID selector
* pseudo-Class (Pseudo-class): The most common is the anchor (a) pseudo-class, such as a:link,a:visited.
* attribute selector (attribute selectors): For example Div[class=demo], contains div element with class as Demo
* category Selector (type selector): HTML tag selection, such as Div. Demo,div element containing class demo
* Pseudo-Object selector (pseudo-element selector): For example, the first word under the Div:first-letter,div element.

Nine, do not need to repeat the definition of inheritable values

In CSS, child elements automatically inherit the parent element's property values, such as color, font, etc., have been defined in the parent element, can be directly inherited in child elements, do not need to repeat the definition, unless it is to notconsistent the current element style does not use the parent element's property values, but note that the browser may use some default values to overwrite your definition

10. Multiple CSS style definitions, attribute append repeat last precedence principle

A label can define more than one class at a time, or it can be a repeating attribute in the same class. For example:
Let's define two styles first.
. One{width:200px;background:url (1.jpg) no-repeat left top;}
. two{border:10px solid #000; Background:url (2.jpg) no-repeat left top;}
In the page code, we can call this:
<div class= "One" two></div>
So the final display effect is what is this div style?? Which of the repeating is the subject??
<div class= "One" two></div> is applied to the following styles:
width:200px;
border:10px solid #000;
Background:url (2.jpg) no-repeat left top;
Because when two or more styles are applied, the style applied by the browser is based on the attribute append repetition last precedence principle
That is, two or more or duplicate style name definition, the browser applies the style is in order, if the duplicate attribute value is defined, with the last definition, if two or more style names are applied, the value of the duplicate attribute is appended, and the repeating property value is the last one. It is important to note that the style is not based on the order of the names applied on the page, but in the style order of the style table.

Xi. using the sub-selector (descendant selectors)

Using sub-selectors is one of the reasons that affect their efficiency. A sub-selector can help you save a lot of class definitions. Let's look at the following code:
<div>
<ul>
<li class= "Subnavitem" > <a href=http://duote.com/# class= "Subnavitem" >item 1</a></li>>
<li class= "subnavitemselected" > <a href= "http://duote.com/#" class= "subnavitemselected" > Item 1</a > </li>
<li class= "Subnavitem" > <a href= "http://duote.com/#" class= "Subnavitem" > Item 1</a> </li>
</ul>
</div>
The CSS definition for this piece of code is:
Div#subnav ul {}
Div#subnav ul Li.subnavitem {}
Div#subnav ul Li.subnavitem A.subnavitem {}
Div#subnav ul li.subnavitemselected {}
Div#subnav ul li.subnavitemselected a.subnavitemselected {}
You can replace the above code with the following method
<ul id= "Subnav" >
<li> <a href= "http://duote.com/#>" Item 1</a> </li>
<li class= "sel" > <a href= "http:/duote.com/#>" Item 1</a> </li>
<li> <a href= "http://duote.com/#>" Item 1</a> </li>
</ul>
The style definition is:
#subnav {}
#subnav Li {}
#subnav a {}
#subnav. Sel {}
#subnav. Sel a {}
Use a sub-selector to make your code and CSS more concise and easier to read.
If there are multiple identical elements in a container, and the styles of these elements are different, avoid using the same method to create the same class as:
<ul class= "One" ><li></li></ul>
<ul class= "Tow" ><li></li></ul>

12, do not need to give the background picture path quotes

In order to save bytes, I recommend not quoting the background image path because the quotation marks are not required. For example:
Background-image:url ("Images
margin:0 Auto;
}
But Ie5/win does not display this definition correctly, and we use a very useful technique to solve it: Use the Text-align property. Just like this:
Body {
Text-align:center;
}
#wrap {
width:760px;
margin:0 Auto;
Text-align:left;
}
The first body of the text-align:center; The rule defines the center of all the elements of the body in Ie5/win (other browsers just center the text), and the second text-align:left the text in the #warp to the left.

13. Importing (import) and hiding CSS

Because the old version of the browser does not support CSS, a common practice is to use the @import technique to hide the CSS. For example:
@import URL (main.css);
However, this method does not work for IE4, which gives me a headache for a while. Then I used the following notation:
@import main.css;
This can also hide the CSS in the IE4, hehe, but also save 5 bytes of it. For a detailed explanation of the @import syntax, you can see the centricle's CSS filter chart here.

14. CSS Hack

Sometimes, you need to define some special rules for IE bug, there are too many CSS tricks (hacks), I only use two of these methods, regardless of whether Microsoft in the upcoming release of IE7 beta version of the better support CSS, both methods are the safest.
1. Methods of annotations
(a) to hide a CSS definition in IE, you can use the child selector (selector):
Html>body p {
}
(b) The following wording is only accessible by IE browser (hidden from other browsers)
* HTML P {
}
(c) There are times when you want Ie/win to be effective and ie/mac hidden, you can use the backslash technique:
* HTML P {
Declarations
}
(d) The following wording is only accessible to IE7 browsers (hidden from other browsers)
*+ HTML P {
}
2. Method of conditional annotations (conditional comments)

Another way, I think, than the CSS hacks more than the test is to use Microsoft's private attribute condition annotation (conditional comments). In this way you can define some styles for IE, without affecting the definition of the main style sheet. Just like this:

<!--[If ie]>
<link rel=stylesheet/css href= "Http://www.duote.com/style/ie.css"/>
<! [endif]-->

There are more CSS hack can be found through the Internet, but there are many hack are not in line with the standard, I wrote according to the above hack write a can distinguish IE6, IE7, FF style, and can meet the standard, code as follows:
. classname {width:90px!important;width:100px;}
*+html. classname {width:95px!important;}
After this write in IE6 under the width is 100px,ie7 under is 95px, Firefox is 90px.

XV, debugging skills: How big is the layer?

When debugging a CSS error, you'll want to parse the CSS code step by step like a typeset worker. I usually define a background color on the problematic layer so that you can see clearly how much space the layer occupies. Some people suggest using border, the general situation is also possible, but the problem is that sometimes border will increase the size of elements, Border-top and Boeder-bottom will destroy the value of vertical margin, so use background more secure.
Another frequently problematic attribute is outline. Outline looks like Boeder, but does not affect the size or position of the element. Only a handful of browsers support outline properties, and all I know is Safari, OmniWeb, and opera.

16. CSS Code writing style
When writing CSS code, for indentation, line breaks, spaces, everyone has a writing habit. After continuous practice, I decided to use the following writing style:
. classname {
width:100px;
}
When using union definitions, I usually write a single line for each selector so that it is easy to find them in the CSS file. A space is added between the last selector and the curly brace {, and each definition is also written in a separate line, and the semicolon is directly behind the property value without a space.
I'm used to adding semicolons after each attribute value, although the last property value on the rule allows you to not write a semicolon, but if you want to add a new style easily forget to fill in the semicolon and create an error, so it is better.
Finally, close the curly braces} and write a separate line. Spaces and line breaks help with reading.

< reference ... http://www.tianjinsem.com/index.php?p=204&replytocom=30 ...------to be perfected >

A summary of naming rules for SEO-optimized div+css