Summary of DIV+CSS naming rules in favor of SEO optimization

Core tip: a summary of DIV+CSS naming rules conducive to SEO optimization

First, CSS file and style naming

1. css file naming specification
Global style: GLOBAL.CSS;
Frame layout: layout.css;
Font style: Font.css;
Link style: link.css;
Print style: print.css;

2. CSS style naming specification

I suggest: With letters, _ Number of workers,-numbers, numbers, must start with a letter, can not be pure numbers. In order to facilitate the development of style name management, please use a meaningful word or abbreviated combination to name, so that colleagues can see that the type is probably the same, so that the time to save the search style, such as:
Head style with header, head left, can be header_left or header_l, and if the column structure can be so--box _1of3 (the first column in the three columns), BOX_2OF3 (the second column in the three columns), Box _3OF3 (third column in the three columns), Other I will not one of the examples, 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 process of work slowly to accumulate their own words are shared out, then everyone's life will be more unified, there will be no more than a word of the situation.) ）

Container: Container/box
Head: Header
Main navigation: Mainnav
Sub-navigation: Subnav
Top Navigation: Topnav
Website Logo: Logo
Big AD: Banner
Middle page: mainbody
Bottom: Footer
Menus: Menu
Menu content: menucontent
Sub-menu: submenu
Submenu content: Submenucontent
Search on: Search
Search keywords: keyword
Search Range: Range
Label text: Tagtitle
Label content: tagcontent
Current Label: Tagcurrent/currenttag
Titles: Title
Contents: Content
Lists: List
Current Position: Currentpath
Side sidebar: Sidebar
Icons: Icon
NOTES: note
Login: Login
Register: Register
Column definition: column_1of3 (first column in three columns)
COLUMN_2OF3 (second column in three columns)
COLUMN_3OF3 (third column in three columns)

Second, the use of ID and class and the difference

We know that when a style sheet defines a style, you can define the ID and define class, for example:
Id Method: #test {color: #333333}, calling <div> content in the 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 used many of the same ID on the page in IE display is also normal, ID and class as if nothing different, with multiple identical ID have any effect?
There are multiple identical ID effects on a page that cannot pass the W3 checksum.
In the page display, the current browser also allows you to make this error, with multiple identical id "under normal circumstances" can also be displayed. But when you need to use JavaScript to control the DIV with the ID, there will be an error.
ID is a label that distinguishes between different structures and content, just like your name, 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 or content, just like a dress;
Conceptually, it's not the same:
ID is the first to find the structure/content, and then define the style; class is to first define a style and then set it to multiple structures/content.
In other words, we recommend that you write xhml+css when the structure of the Wie Yi to use ID, otherwise use class bar (so let the unstructured positioning of the DIV block ID allow the programmer to define their own use)
Web standards want everyone to write code in strict habits.

three. Use CSS abbreviations

Using abbreviations can help reduce the size of your CSS files and make it easier to read. The main rules for common CSS abbreviations:
Color
16 The color value of the binary, if the value of each two digits is the same, you can abbreviate 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 values that represent top and bottom are value1,right and left values that are value2
Property:value1 value2 Value3; The value that represents top is value1,right and left is the value of Value2,bottom is Value3
Property:value1 value2 value3 value4; The four values, in turn, represent Top,right,bottom,left
Convenient memory method is clockwise, upper right and lower 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 one sentence: border:1px solid #000;
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 to one sentence: background: #f00 URL (background.gif) no-repeat fixed 0 0;
The grammar is Background:color image repeat attachment position;
You can omit one or more of the property values, and if omitted, the property value will be in the browser default value, the default value 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 one 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)
Cancellation of the default dot and ordinal can be written like this 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 to one sentence: List-style:square inside URL (image.gif);

1 2 3 Next page > Full text reading tips: Try "←→" button, turn the page more convenient Oh!

[1] [2] [3] Next page