CSS comments, naming, inheritance, style sorting and other CSS Skills Summary _ Experience Exchange

I. About annotations

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

Ii. about naming

In the name of the CSS file, I prefer to use the semantic English name or abbreviated name, in a very useful part may be named in part pinyin. Also, in some classes that have dependencies, I might use a name like "List_banner", which is the parent element name plus "_" plus the element name.
About naming, you can negotiate according to the habits of the team designer. However, it's a good idea to add a comment after naming it for future document generation.

Iii. on the nature of inheritance

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

Iv. about the hierarchy of CSS definitions

When defining a class in CSS, it is recommended to use a hierarchical approach to describe the statement.
Example structure:

Example Source Code [www.52css.com]





Example CSS:

Example Source Code [www.52css.com]
#menu {...}
#menu. menulist {...}
#menu. menulist. Selectit {...}
In the above example, the final effect, #menu没有必要重复出现, but in fact, if you can add #menu in front, will make the document hierarchy more clear, more conducive to reading.

V. About style sorting

When designing CSS stylesheets, most of us are handwritten code, which makes it easy to sort out the styles 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 creates a certain amount of confusion, easy to make ideas frustrated. I recommend that individual or team designers contract a rough order, so that there is not much difference in individual terms, 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 and so on the position of the front, background second, then the control text font, color, text-align, etc. Then there are some special tags to use the elements, such as List-style, and finally the CSS filter. When special situations are encountered, such as the precedence of some CSS attributes, it can be handled flexibly.

