CSS style Sheet Tips Summary

I. About annotations

Annotations in CSS are important when you create a XHTML+CSS Web site. When you create CSS styles, you should keep the habit of commenting on them. In general, I am accustomed to using the "/* Comment content * * * * *" format to write comments, because in the editplus and so on with a highlighted editor, the use of C language commonly used in the "/***************/" annotation is meaningless, there is no need to fill a large number of meaningless content as a separator. Annotated document as the site's original CSS document, when publishing a Web site, you can use the CSS compression tool to compress CSS, in the output of CSS to remove annotations to improve file transfer efficiency.

Ii. about naming

When naming CSS files, I prefer to use the semantic English name or abbreviation, in the very use of the partial pinyin may be named. In addition, in some subordinate class, I might use a name like "List_banner", which is the parent element name plus "_" plus the element name.

For naming, you can negotiate according to the habits of team designers. However, it is best to add a comment after the name so that future documentation can be generated.

Iii. on the nature of inheritance

In CSS, make good use of inheritance. For example, in two nested div, the parent element defines the Background-color property as black, and if the background of the child element is black, there is no need to repeat the definition. Being good at using the inheritance of CSS can make code more efficient and streamlined.

Iv. levels of CSS definition

When defining class in CSS, it is recommended that you describe the statement in a structured way.

Sample structure:

　

　　

　

Sample CSS:

#menu { ... }
#menu .menulist { ... }
#menu .menulist .selectit { ... }

In the previous example, the final effect is #menu没有必要重复出现, but in fact if you can add #menu to the front, it will make the hierarchy of the document more clear and more conducive to reading.

V. About style sorting

When designing a CSS style sheet, most of us are handwritten code, which can easily result in confusion in the sort style in class. For example, there are several classes used in the padding, margin, background, color and other styles, but the sort of time, some class is background compared to the front, some margin compared to the front. This caused a certain confusion, easy to let the idea of frustration. I suggest a general order of personal or team designers that doesn't look very different from the individual, but overall it will be easier to read and manage, and the overall efficiency will improve a lot.

For example, I default to the width, height and padding, margin, border, etc. placed in the front of the position, background second, and then control the text font, color, text-align and so on, Then there are some special tags to use the elements, such as List-style, and finally a CSS filter. You can be flexible when you encounter special situations, such as the priority of some CSS attributes that need to be defined.

Summed up here, Fire tak welcome everyone to add, correct.