Process and CSS code order for writing CSS files

Article Introduction: CSS production process and standards.

CSS production process and standards

(i) Production process:
1, create the file (file management and naming)
2, establishing relationships with HTML documents

Note the point:
1) use not recommended:Inline styles and inline styles
Reason:Structure (HTML) and performance (CSS style) not separated
2) difference:Outside chain style and import style (http://zhidao.baidu.com/question/198616109.html)
3) website commonly used:Outside chain style

3, make the page style

Note the point:

• Consistent with HTML frames from top to bottom
• From the whole to the local
• Shared styles to individual styles

4, add comments

Comment Range:
1 each document corresponding to a document annotation (facilitate later maintenance and management)
Main Note notes:Document creator, time, content, etc.
2) attribute Comment Description:CSS hack, special properties, etc.
3) feature Annotation Description:Default styles, buttons, pop-up boxes, etc.

5, complete the inspection
*********************************************************************

(ii) Production standards : (Beneficial to development and post management)
This standard is our company's. Different companies, only for your reference ~ ~

Indent and line wrapping:

Description:
Indentation: Setting tab tabs (same as HTML)--click tab to generate 2 spaces
Line Wrap:
Selector wrapping: 2 or more selectors of the same style, one row per selector
Property Wrap:
1 when there is only one property, the selector and the property are in the peer
2) More than 2 attributes, one row for each property

Shorthand
1 Color: 16 color value: #RRGGBB--r,g,b are all in the same time, abbreviated as: #RGB

1. Color: #336699;
   
2. Abbreviation: color: #369;

2) Unit: The value is 0 o'clock, the unit can be omitted

1. margin:0px;
   
2. Abbreviation: margin:0;

3) Font

4) Background

1. background-color:red;
   
2. Background-image:url ();
   
3. Background-repeat:no-repeat;
   
4. Baclgrpimd-position:top right;
   
5. background-attachment:fixed;
   
6. (Each property can be omitted) shorthand: Background:background-color background-image background-repeat background-position Background-attachment;

5 within the outer margin (margin and padding the same shorthand)

6) Border

2. border-width:1px;
   
4. Border-style:solid;
   
6. border-color:red;
   
8. Abbreviation: border:border-width border-style border-color;
   
10. border:1px solid red;
    
12. Unilateral shorthand: border-top:1px solid red;
    
14. border-right:1px solid red;
    
16. border-bottom:1px solid red;
    
18. border-left:1px solid red;
    
20. (not recommended) Single attribute shorthand: (Order: Upper right and lower left)
    
22. Border-width:border-top-width border-right-width border-bottom-width border-left-width;
    
24. Border-style:border-top-style Border-right-style Border-bottom-style Border-left-style;
    
26. Border-color:border-top-color Border-right-color Border-bottom-color Border-left-color;
    

CSS Code Order
Order of CSS documents

• The common code style is placed at the front of the document
• CSS structure the Shun order in accordance with HTML the knot structure

C Order of attributes in the SS selector : Display Properties-> Their properties-> text properties

• Show Properties: Display, List-style, position, float, clear
• Self attribute: width, height, margin, padding, Border,background
• Text properties: Color, Font, text-decoration, Text-align, vertical-align, white-space, content

Reason: This order is the code standard developed by the project, in line with the browser render order, which ultimately achieves the goal of improving execution efficiency