Detailed understanding of the naming rules of DIV+CSS is conducive to the implementation of SEO optimization.


I. Naming Specification for CSS Files

Suggestion: Use letters, workers, numbers, numbers, must start with letters, not pure numbers. In order to facilitate the management of style names after development, please use meaningful words or abbreviation combinations to name, so that colleagues can see at a glance which part of the style is probably, which saves the time to find the style, such as:
Header is used for header, header_left or header_l for the left side of the head, and box_1of3 (the first column in the three columns), box_2of3 (the second column in the three columns), box_3of3 (the third column in the three columns) for column structure. Others I will not give examples one by one, just name them according to the above rules.

Here are some commonly used naming words for you to use: (in the future, you will gradually share your accumulated words in the process of work, then your lives will be more unified, there will be no situation of polysemy.)

Overall style: global. css;
Structural layout: layout. css;
Font style: font.css;
Link style: link. css;
Print style: print. css;

Container: container/box
Head: Header
Main Nav
Subnavigation: subNav
Top Navigation: TopNav
Big Advertisement: Banner
In the middle of the page: mainBody
Bottom: footer
Menu: menu
Menu Content: menuContent
Submenu: subMenu
Submenu content: subMenuContent
Search: search
Search keywords: keyword
Range: Range
Tag text: tagTitle
Tag content: tagContent
Current tag: tagCurrent/current Tag
List: list
Current location: current Path
Side bar: sidebar
Icon: Icon
Login: login
Column Definition: column_1 of 3 (first column in three columns)
Column_2of3 (second column in three columns)
Column_3of3 (third column in three columns)

II. The Use and Difference of ID and class

We know that when a style sheet defines a style, you can define either an ID or a class, for example:

ID method: # test {color:}, call < div > content < div > in the page
CLASS method:.Test {color:} calls <div class= “test”> content <div> in the page.
ID can only be used once for a page, and class can be referenced many times.
I use multiple identical IDS in the page to display in IE, which seems to be no difference between ID and class. What’s the effect of using multiple identical ids?
Pages with multiple identical IDs cannot pass W3 validation.
On page display, the current browser also allows you to make this mistake, using multiple identical IDs “generally” can also be normal display. But when you need to use JavaScript to control the div through id, there will be errors.
ID is a tag used to distinguish different structures and contents, just like your name. If two people have the same name in a room, confusion will occur.
Class is a style that can be applied to any structure and content, just like a dress.
Conceptually, it’s different:
ID is to find the structure / content first, then define the style for it; class is to define a style first, and then apply it to multiple structures / content.
That is to say, we recommend that when writing XHML + CSS, if it is one-dimensional structural positioning, use id, otherwise use class (so that the div block ID of unstructured positioning is allowed to be defined and used by programmers themselves).
Web standards want you to write code with strict habits.

3. Use the abbreviation CSS

Using abbreviations can help reduce the size of your CSS files and make them easier to read. The main rules of common abbreviations of CSS are as follows:

Hexadecimal color values can be abbreviated by half if the values of each two are the same, for example:
# 000 000 can be abbreviated as # 000; 99 can be abbreviated as # 369;
Box size
There are usually four ways of writing:
Property: value1; means that all edges are a value value1;
Property: value1 value2; the values for top and bottom are value1, and the values for right and left are Value2
Property: value1 Value2 value3; the value of top is value1, the value of right and left is value2, and the value of bottom is value3
Property: value 1 value 2 value 3 value 4; the four values in turn represent top, right, bottom, left
Convenient memory method is clockwise, upper right, lower left. Examples of specific applications in margin and padding are as follows:
margin:1em 0 2em 0.5em;
The properties of the border are as follows:
It can be abbreviated as: border: 1px solid #000;
The grammar is border: width style color;

The attributes of the background are as follows:

background-position:0 0;
It can be abbreviated as: background: F00 URL (background. gif) no-repeat fixed 0;
The grammar is background: color image repeat attachment position;
You can omit one or more attribute values. If omitted, the attribute values will use the browser default values, which are:
color: transparent
image: none
repeat: repeat
attachment: scroll
position: 0% 0%

The attributes of fonts are as follows:

font-family:”Lucida Grande”,sans-serif;
It can be abbreviated as: font: Italic small-caps bold 1em/140% “Lucida Grande”, sans-serif;

Note that if you define abbreviations, at least define font-size and font-family values.


Cancel the default dot and serial number to write list-style: none;

The attributes of list are as follows:


It can be abbreviated as: list-style: square in URL (image. gif);

4. Define clearly the unit unless the value is 0

Forgetting to define size units is a common mistake for CSS novices. In HTML you can just write width = 100, but in CSS you have to give an exact unit, such as width: 100px width: 100em. There are only two exceptions where units can be undefined: line height and zero values. In addition, all other values must follow the unit closely. Be careful not to add spaces between the value and the unit.

V. Case-sensitive

When using CSS in XHTML, the element names defined in CSS are case-sensitive. To avoid this error, I recommend lowercase for all definition names.
Class and ID values are also case-sensitive in HTML and XHTML. If you must mix case and case, please make sure that your definition of CSS is consistent with the label in XHTML.

6. Remove the element restriction before class and ID

When you write an element to define a class or id, you can omit the previous element restriction, because ID is unique in a page, class can be used many times in the page. It makes no sense to limit an element. For example:
Div_ # Id1 {} can be written as # Id1 {}
This saves some bytes.

Default Value

The default values of padding and margin are usually 0, and background-color is transparent. But the default values may be different in different browsers. For fear of conflict, you can define margin and padding values for all elements at the beginning of the stylesheet as 0, as follows:

* { 

Or to define an element:

ul,li,div,span { 

VIII. Priority of CSS

Inline style > ID selector > class, pseudo-Class and attribute selector > type, pseudo-element


* Inline style: The style attribute of an element, such as < div style= “color: red;” > </div>, where color: red; is the in-line style.
* ID selector: The ID attribute of an element, such as <div></div>, can be used with the ID selector #content
* Pseudo-class: The most common is anchor (a) pseudo-class, such as a: link, a: visited.
* attribute selectors: such as div [class = demo], which contains div elements with class demo
* Type selector: HTML tag selection, such as Div. demo, where the div element contains elements with class demo
* Pseudo-element selector: For example, div: first-letter, the first word under the div element.

9. No need to redefine inheritable values

In CSS, child elements automatically inherit the attribute values of parent elements, such as color, font, etc., which have been defined in parent elements. They can be inherited directly in child elements without repeated definitions unless the attribute values of parent elements are not used to change the current element style, but it is important to note that browsers may override your definition with some default values.

10. Multiple CSS style definitions, attribute tracing and duplication of the last priority principle

A tag can define multiple classes at the same time, or it can redefine attributes in the same class. For example:

Let’s first define two styles

.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:

<div class="one" two></div> 

So what’s the final display effect of this div style? Which one does the repetition refer to?

<div class="one" two></div>The application pattern is as follows:

border:10px solid #000; 
background:url(2.jpg) no-repeat left top; 

Because when two or more styles are applied, the browser’s style is based on the last priority principle of property recovery and duplication
That is to say, two or more or duplicate style names are defined. The style used by browsers is sequential. If duplicate attribute values are defined, the final definition shall prevail. If two or more style names are applied, the non-duplicate defined attribute values are added, and the duplicate attribute values shall prevail on the last one. It’s important to note that the order of styles is not based on the name order applied on the page, but on the style order in the stylesheet.

11. Use descendant selectors

The use of sub-selectors is one of the reasons that affect their efficiency. Subselectors can help you save a lot of class definitions. Let’s look at the following code:

<li class="subnavitem"> <a href= class="subnavitem">Item 1</a></li>> 
<li class="subnavitemselected"> <a href="" class="subnavitemselected"> Item 1</a> </li> 
<li class="subnavitem"> <a href="" class="subnavitem"> Item 1</a> </li> 

The CSS definition of this 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

<ul id=”subnav”> 
<li> <a href=">" Item 1</a> </li> 
<li class="sel"> <a href="http:/>" Item 1</a> </li> 
<li> <a href=">" Item 1</a> </li> 

Style definitions are:

#subnav { } 
#subnav li { } 
#subnav a { } 
#subnav .sel { } 
#subnav .sel a { } 

Using sub-selectors can make your code and CSS more concise and easy to read.

If there are multiple identical elements in a container, and these elements have different styles, avoid using this method and build different classes, such as:

<ul class=”one”><li></li></ul> 
<ul class=”tow”><li></li></ul>

No need to quote the path of background picture

In order to save bytes, I recommend not to quote the path of the background image, because quotation marks are not necessary. For example:

margin:0 auto; 

But IE5/Win can’t display this definition correctly. We use a very useful technique to solve this problem: using the text-align attribute. Like this:

body { 
#wrap { 
margin:0 auto; 

The first body’s text-align: center; the rule defines that all elements of body in IE5/Win are centered (other browsers just centered text), and the second text-align: left; the text in # warp is left.

Import and Hide CSS

Because older browsers do not support CSS, a common practice is to use the @import technique to hide CSS. For example:

@import url(main.css);

However, this method does not work for IE4, which has been a headache for me for a while. Later, I used this way of writing: ____________

@import main.css;

So we can hide CSS in IE4, and save 5 bytes. For a detailed description of the @import grammar, see Centicle’s CSS filter chart here.

CSS hack

Sometimes, you need to define some special rules for IE browser bugs. There are too many CSS techniques (hacks). I only use two of them. Whether Microsoft supports CSS better or not in the upcoming IE7 beta version, these two methods are the safest.

1. The Method of Annotation

(a) Hide a CSS definition in IE, you can use child selector:

html>body p { 

(b) The following wording is understandable only by IE browsers (hidden from other browsers)

* html p { 

(c) Sometimes you want IE/Win to be effective and IE/Mac to be hidden. You can use the backslash technique:

* html p { 

(d) The following wording is understood only by IE7 browsers (hidden from other browsers)

*+ html p { 

2. Method of conditional comments

Another way, I think, to stand the test better than CSS Hacks is to use Microsoft’s conditional comments on private attributes. In this way, you can define some styles for IE independently without affecting the definition of the main style sheet. Like this:

<!--[if IE]> 
<link rel=stylesheet/css href="" /> 

There are more CSS hacks you can find online, but many hacks do not meet the W3C standard, I wrote a hack based on the above can distinguish IE6, IE7, FF style, and can meet the W3C standard, the code is as follows:

.classname {width:90px!important;width:100px;} 
*+html .classname {width:95px!important;} 

The width of IE6 is 100px, IE7 is 95px and Firefox is 90px.

Fifteenth, debugging skills: how big is the layer?

When debugging CSS goes wrong, you have to analyze the CSS code line by line like a typesetter. I usually define a background color on the problematic layer so that I can see clearly how much space the layer occupies. Some people suggest borders, which are generally acceptable, but the problem is that sometimes borders increase the size of elements, and border-top and boeder-bottom destroy the value of vertical margins, so backgrounds are safer to use.
Another frequently problematic attribute is outline. Outline looks like a boeder, but does not affect the size or location of elements. Only a few browsers support outline attributes, and all I know is Safari, OmniWeb, and Opera.

XVI. CSS Code Writing Style

When writing CSS code, everyone has a writing habit for indentation, line breaks, and spaces. After continuous practice, I decided to adopt the following writing style:

.classname { 

When using joint definitions, I usually write a single line for each selector, which makes it easy to find them in a CSS file. Add a space between the last selector and braces {, and write a single line for each definition. The semicolon is directly after the attribute value, without adding a space.
I’m used to adding semicolons after every attribute value. Although rules allow the last attribute value to be followed by no semicolons, it’s better to add them if you forget to add a semicolon and make mistakes when you add a new style.
Finally, close the braces} and write a single line. Spaces and new lines are helpful for reading.


Above is the DIV + CSS naming rules introduced by Xiaobian to you in order to facilitate the implementation of SEO optimization, I hope to help you, if you have any questions, please leave me a message, Xiaobian will reply to you in time. Thank you very much for your support to developpaer.