Question about CSS webpage layout id and class naming

1. Use class_name to write the class name.

I used to like writing with class-name, but it seems that there is no difference between the two. However, I am opposed to writing class names using className because I have always been skeptical about Browser case sensitivity. However, I will write the id as a camper. For the reason, see the next one.

　　2. Style uses class instead of id.

There are three reasons.

1. The id cannot be repeated, so you can use the class for countless times without fear.
2. The priority of id is too high. If you write a # page_content a {color: # f60}, you are finished. You need to change the link color, # page_content must be added before this priority can be crossed.
3. id is reserved for JS, so as to conform to the principle of separation of performance and behavior. So I use the camper id to reflect this.

　　3. Use margin and padding to omit the last value.

For example, if the left and right values of margin: 20px 10px 5px are the same, you should omit the last value and write it as margin: 20px 10px 5px. In this case, you need to change the Left and Right spacing and change one, to avoid missing information. In fact, although this problem is very small, we can see the degree of proficiency in the rules for the four values of margin to be omitted.

　　4. Write css based on the standard, and then use hack for a specific browser.

For example, we usually encounter the following statement:

. Side_col_webjx {
Float: left
Display: inline
Margin-left: 20px
}

My writing method will be:

. Side_col_webjx {
Float: left
Margin-left: 20px
}

*. Side_col_webjx {
_ Display: inline/* hacked for IE 6 */
}

Do you understand? We should not mix hack together, nor should we use a lucky mentality. We feel that writing float: left and display: inline together is okay. Well, they are okay, but other hack is not. In addition, the "display: inline" command is written here to solve the IE6 bug. Therefore, you must add an underscore to express your purpose.

In addition, do not think that all hack is prepared for IE. In fact, some hack targets other browsers, such as FF. This requires you to be proficient in css standards and be confident in determining which rendering complies with standards and which violate standards.

In addition, I like to add an asterisk in front of the hack. In fact, this is just my habit. Maybe I won't use it for a while, huh, huh.

　　5. Add a 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 write This is a pen. That's a penric. There is no space after the sentence, an error message will appear in the word ). So since css was invented by foreigners, it should be written in their format. Similarly, spaces in var a = B + c in JS should also be added.

　　6. Appropriate Cascading or indentation to define the "Scope" of css ".

What is "css scope "? In fact, not all styles are used in all places. Some styles are only used in one piece. For example, the "search box" in the "navigation bar" may be written:

. Nav. search {}
Sometimes code priority is increased when you use cascade, so you can also use indentation to "symbolically" reflect the scope. Like this:

. Login_box {}
. Forgot_pwd {}
Indent to indicate that the corresponding labels have parent-child relationship. However, this can only serve as a reminder.