Summary of CSS techniques such as CSS comments, naming, inheritance, style ordering_Experience exchange

1. About comments

When creating an xhtml CSS website, comments in CSS are very important. When creating CSS styles, you should maintain the habit of commenting casually. Generally, I am used to using the format of "/* Comment content */" to write comments, because in editors with highlighting functions such as EditPlus, the commonly used "/********" in C language is used. Comments such as *******/" are meaningless, and there is no need to fill in a lot of meaningless content as separation. Documents with comments serve as the original CSS documents of the website. When publishing the website, you can use a CSS compression tool to compress the CSS and remove comments from the output CSS to improve file transfer efficiency.

2. About Naming

When naming CSS files, I prefer to use semantically correct English names or abbreviations. I may use part of Pinyin for unusual parts. In addition, in some dependent classes, I may use a name similar to "list_banner", that is, the parent element name plus "_" plus the element name.
About naming, it can be negotiated according to the habits of the team designers. But it’s best to add a comment after the name so that you can generate documentation for future reference.

3. About inheritance

In CSS, inheritance must be made good use of. For example, in two nested divs, the parent element defines the background-color attribute as black. If the background of the child elements is also black, there is no need to repeat the definition. Making good use of CSS inheritance can make your code more efficient and streamlined.

4. About the hierarchy of CSS definitions

When defining classes in CSS, it is recommended to use a hierarchical way to describe statements.
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, from the final effect, there is no need for #menu to appear repeatedly, but in fact, if #menu can be added in front, it will make the document hierarchy clearer. More conducive to reading.

5. About style sorting

When designing CSS style sheets, we mostly write code by hand, which can easily cause confusion in the style sorting in classes. For example, several classes use padding, margin, background, color and other styles. However, when sorting, some classes have background higher and some have margin higher. This creates a certain amount of confusion and can easily frustrate your thinking. I suggest that individual or team designers agree on a rough order, so that individually there will not be much difference, but overall it will be easier to read and manage, and the overall efficiency will be improved a lot.

For example, by default, I put width, height, padding, margin, border, etc. at the front, followed by background, then font, color, text-align, etc. that control text, and then some Elements that can only be used by special tags, such as list-style, etc., and finally css filters. When encountering special situations (such as the priority of certain CSS properties that need to be defined), it can be handled flexibly.​