CSS page layout ID and class name introduction

First, write the class name in Class_name way.

I used to like to write with Class-name, but it seems that there is no difference between the two. But I'm more opposed to writing class names with ClassName because I'm always skeptical of browser-sensitive issues. But ID I'll write hump style, for the next one.

Second, the style is used class without ID.

There are three reasons.

1,id can not be repeated, so use class words, can be unscrupulous use countless times.

2,id priority is too high, if write a #page_content a {color: #f60}, then you are finished, the inside to change the link color, must add #page_content to cross this priority.

3,id dedicated to JS, so as to comply with the principle of separation of performance and behavior. So ID I use hump style, also in order to embody this point.

Three, margin and padding, try to omit the last value.

For example margin:20px 10px 5px 10px; , the left and right values are the same, should omit the last value, written as margin:20px 10px 5px; This time to change the left and right spacing, change a good, lest the leak. In fact, although this problem is very small, but you can see the margin four values to omit the rule of proficiency.

Four, according to the standard to write CSS, and then for a specific browser for hack.

For example, we usually have the following wording:

. side_col_x {

Float:left;

Display:inline;

margin-left:20px;

}

And my writing would be:

. side_col_x {

Float:left;

margin-left:20px;

}

*. side_col_x {

_display:inline; /*hacked for IE 6*/

}

Did you see that? should not mix hack, also should not use a lucky mentality, feel float:left and Display:inline write together nothing. Well, they're really okay, but the other hack are not necessarily. And writing display:inline here is purely to solve the IE6 bug, so precede with underline to express your purpose clearly.

In addition do not think that all hack are prepared for IE. In fact, some hack are for other browsers, such as FF. This requires you to be proficient in CSS standards and to be confident in judging which rendering is compliant and which violates the standard.

In addition, I like to add an asterisk in front of the hack in fact, this is purely a personal habit. Maybe after a while I will not be so used, hehe.

Five, remember to add space.

. class_name {Property:value}. I personally think that a reasonable space is an indicator of good code. According to the English habit, punctuation should be followed by spaces (if you are writing this is pen.) That's a pencil. Period followed by no spaces, Word will have error prompts. So since CSS is invented by foreigners, it should be written in their format. Similarly, in js var a = B + C; The space inside should also be added.

Six, appropriate cascade (cascading) or indentation to define the "scope" of the CSS.

What is "Scope of CSS"? In fact, not all of the styles are used in all places. Some styles are used only in one piece, such as the "search box" in the "Navigation Bar", which may be written as:

. Nav. Search {}

Sometimes cascading adds code precedence, so you can also use a "symbolic" representation of the scope in the indentation. Like this:

. Login_box {}

. forgot_pwd{}

Indents to indicate that their corresponding labels have a parent-child relationship. But it only works as a reminder.