) CSS naming and writing

Http://www.iqianduan.com/post/29.html

1. CSS style naming:

1. The general principle should be semantic-oriented to avoid structuring. For example, you can assign the ID righthandnav to a navigation bar, because you want it to appear on the right. However, if you change his position to the left, CSS and (x) HTML will not be synchronized. Therefore, it is more appropriate to name this element subnav or secondnv.
2. style names can be named by phrases that are close to semantics, simple and easy to understand English abbreviations, numbers, hyphens (-), and underscores (_), reducing the use of Chinese pinyin, do not use Chinese (though supported ).

2. CSS name writing principles:
1. All words are in lower case. For example, the external container can be a iner or wrapper;
2. there are two ways to write multiple phrases: the first is to write all the phrases in lower case and separate them with a hyphen (-) or underscore (_). For example: news in the main forum, you can use main_news or main-News (the former is recommended for personal use). The other method is "camper name ". Multiple words are combined, the first word is lowercase, and the second word is capitalized, for example, newrelease (latest product/New + release ).
3. Try to avoid combinations of too many words, making it inconvenient to remember and maintain them.

3. CSS attribute classification:
Common CSS attributes can be divided into four categories: attributes, text attributes, layout positioning attributes, and other attributes. Its Attributes mainly include: width (width), height (height), background (background), border (Border); text attributes mainly include: font (font), color (color), text-align (align), text-Decoration (Text modifier), text-indent (indent), etc. layout positioning attributes mainly include: margin (external patch), padding (inner spacing), float (floating, including clear), position (positioning, corresponding top, right, bottom, left), display, visibility, overflow (overflow), etc; other attributes include list-style, vertical-vlign, cursor, Z-index, and zoom. The attributes I listed are only the most commonly used, not all.
 
4. CSS attribute writing sequence.
Some people may feel that there is no need to discuss this issue. Everyone has their own habits. However, I think it is necessary to arrange the rules of the system. My style Writing sequence uses the attribute classification mentioned above. The basic sequence is: Attributes> layout positioning attributes> text attributes> others. In my understanding, this sequence is mainly located through vision. For example, when I see a TV set, it is first about its size and appearance; then I will pay attention to his position. Is it on the TV cabinet or on the sofa? Next, turn on the TV and enjoy the wonderful program... For the order of specific attributes in each category, you can follow the order of the first letter or according to your habits. See http://www.cnblogs.com/zllwebjs/articles/1728832.html for this item

5. Arrange CSS attributes.
Is it a single style row or a row-by-row short sentence? Does the multi-layer structure style inherit or indent?
From the perspective of readability and maintainability, line-by-line short sentences are better and easier for beginners to understand. However, for a large website, there will be many styles. If such a style is used, it will cause a great waste of page space, and it is not easy to find too many lines. If you are familiar with CSS, you can try to write it in a single line, so that you don't need to always wrap it, which also improves the work efficiency. Or there is a way to fold: Use the attribute writing sequence I mentioned above to write a row for each type of attribute, so there are only four rows for the style with many attributes, if there are few, write them in one line.
As for the second question, from a personal perspective, if it is a multi-layer structure, inheritance is better than indentation. Because inheritance can intuitively show the relationship between different styles, and control the Display Effect of styles by the priority of different structures. There is a small problem. Theoretically, style Nesting is not too many layers, because it will affect the reading speed of the style. It is recommended that the nesting should not exceed five layers. Therefore, when using such a structure, you must flexibly control the Organization. I believe this will be sufficient for you.