How to understand the CSS coding Specification and CSS attribute Writing order of Discuzx system
This article mainly explains "how to understand the CSS coding specification and CSS attribute writing order of Discuzx system". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "how to understand the Discuzx system CSS coding specifications and CSS attribute writing order"!
1. Attributes are written on one line, with spaces between attributes, between attribute names and values, and between attributes and "{}", for example: .class {width: 400px; height: 300px;}
two。 The writing order of the attributes:
2.1. According to the element model from the outside to the inside, from the whole to the details, it is roughly divided into five groups:
Location: position,left,right,float
Box Model attribute: display,margin,padding,width,height
Border and background: border,background
Paragraphs and text: line-height,text-indent,font,color,text-decoration,...
Other attributes: overflow,cursor,visibility,...
2.2. Properties for special browsers should be written before standard attributes, for example:-webkit-box-shadow:;-moz-box-shadow:; box-shaow:
3. Be careful to add new selector rules, especially not to abuse id, inherit and reuse existing styles as much as possible
4. Selectors, attributes, and values are all lowercase (except for the color value of the format). The abbreviated selector name must indicate the full name before the abbreviation, for example, .cl-> Clearfix
5. Avoid using all kinds of CSS Hack. For a special definition of IE, see "instructions on CSS Hack" in the following section.
6. Do not use redundant and inefficient CSS writing, such as:
Ul li a span {...}
7. Use with caution! important
8. It is recommended to use the words in the class/id name
6.1. Indicates status: a-> active
6.2. Presentation structure: h-> header,c- > content,f- > footer
6.3. Representation area: mn- > main,sd- > side,nv-navigation,mu- > menu
6.4. Presentation style: lMuListTabe pendant pop
9. For undecided items in the development process, you must use [!] Mark it for later discussion and collation
At this point, I believe that "how to understand the Discuzx system CSS coding specifications and CSS attribute writing order" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!
