CSS experience: share with you six CSS habits

We have introduced many CSS experiences and skills in my love of CSS. These things are published in articles on 52CSS.com. I believe they will be helpful and enlightening to you. Some habits are especially important. I will share with you six CSS habits today. Because habits actually change, you can only write "Recent. These habits have nothing to do with technology. If they do not comply with, they will not make mistakes. However, I think good habits will reflect a person's quality.

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.

Ii. 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. margin and padding. Try to omit the last value.

For example, margin: 20px 10px 5px 10px; the left and right values are the same, so we should omit the last value and write it as margin: 20px 10px 5px; then we need to change the Left and Right spacing, just change one so as not to miss it. 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:

Program code
. Side_col {
Float: left;
Display: inline;
Margin-left: 20px;
}
　　
My writing method will be:

Program code
. Side_col {
Float: left;
Margin-left: 20px;
}
*. Side_col {
_ 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 spaces.

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, in JS, spaces in var a = B + c 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:

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

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

CSS skills are constantly summarized and understood for coding. They are constantly improved at any time. If you have any experience, please write your experience on CSS.