1. About comments
Comments in CSS are very important when creating xhtml+CSS websites. When creating CSS styles, you should maintain the habit of commenting casually. Generally, I am used to writing comments in the format of "/* comment content*/", 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 partial pinyin names 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.
Regarding naming, it can be negotiated based on 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, make good use of inheritance. 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 levels of CSS definition
When defining classes in CSS, it is recommended to use a hierarchical way to describe statements.
Example structure:
| The following is the quoted content: <div id="menu"> <div class="menulist"> <div class="selectit"></div> </div> </div> |
Example CSS:
| The following is the quoted content: #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 and easier to read.
5. About style sorting
When designing CSS style sheets, we mostly write code by hand, which can easily cause confusion in the ordering of styles 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 special tags that can only be used. Elements, like 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.