CSS comments, naming, inheritance, style sorting, and other CSS skills

I. Comments

Comments in CSS are very important when you create an xhtml + CSS website. When creating CSS Styles, you should keep comments on your own. In general, I am used to writing comments in the format of "/* Comment content */", because in EditPlus and other highly highlighted editors, it is meaningless to use comments such as "/****************/" commonly used in the C language, there is no need to fill in a large number of meaningless content as separation. As the original CSS document of the website, you can use the CSS compression tool to compress CSS when publishing the website, and remove comments from the output CSS to improve file transmission efficiency.

Ii. Naming

When naming a CSS file, I prefer to use a semantic-compliant English name or abbreviation. In most cases, I may use some pinyin names. In addition, in some subordinate classes, I may use names like "list_banner", that is, add "_" to the parent element name and element name.
You can negotiate the name based on the style of the team designer. However, it is best to add a comment after the name to generate a document for future reference.

Iii. Inheritance

Make good use of inheritance in CSS. For example, in two nested Divs, the parent element defines the background-color attribute as black. If the background of the child element is the same as black, the child element does not need to be defined repeatedly. Being good at using the inheritance of CSS can make the code more effective and streamlined.

Iv. Levels of CSS Definition

We recommend that you describe the statements in a hierarchical manner when defining classes in CSS.
Example structure:

Example Source Code [www.52css.com]
<Div id = "menu">
<Div class = "menulist">
<Div class = "selectit"> </div>
</Div>
</Div>
Sample CSS:

Example Source Code [www.52css.com]
# Menu {...}
# Menu. menulist {...}
# Menu. menulist. selectit {...}
In the above example, from the final result, # menu does not need to be repeated, but if you can add # menu in front of it, it will make the document level clearer and more conducive to reading.

V. Style sorting

When designing CSS style sheets, we mostly write code, which can easily lead to disordered style sorting in the class. For example, several classes use padding, margin, background, color, and other styles. However, in sorting, some classes have the top background, while some have the top margin. In this way, a certain degree of confusion is caused and the idea is easily frustrated. I suggest that individual or team designers make an agreement in a general order. In this way, there is not much difference in some cases, but it will be easier to read and manage as a whole, and the overall efficiency will be improved a lot.

For example, by default, I place width, height, padding, margin, and border on the top, followed by background, and then control the font, color, and text-align of the text, then there are some elements that can be used by special tags, such as list-style, and finally css filters. In special cases (for example, the priorities of certain CSS attributes need to be defined), you can flexibly process them.