CSS-Coding specifications

Attribute Order

1, positioning, display: Position top float Clear clip z-index display Visibility List-style

2, Box model: Width min-width box-sizing padding margin overflow

3. Font, Text: Font color line-height text-align letter-spacing

4. Decoration: Border outline background opacity cursor

5, Effect: Transition transform Animation

Abbreviated value, color value

1, font-size:. 16rem; Omit 0 before the decimal point

2, margin:10px 0 0 10xp; Omit 0 of units

3, color: #CCC; Omit the following 3 bits with the same color value

One-line completion of a selector definition

. g-header{width:950px; height:70px; Background-color: #666;}  No more than 3. g-header {    position:relative;    width:950px;    height:70px;    Color: #FFF;    Background-color: #666;}  More than three empty rows

Use single quotation marks

. G-header{background:url (images/pic.jpg);}  Omit the quotation marks in the URL. G-header:after{content: '. ';}  Use single quotation marks where quotation marks are required

Private in front, standard in the rear

. m-box{    -webkit-box-shadow:0 0 0 #000;    -moz-box-shadow:0 0 0 #000;    box-shadow:0 0 0 #000;}

Comments

/** block-level comment *//* single-line comment */

Selector order

1, from large to small (range)

2, from low to high (basic, Pseudo-Class)

3, Binate to the back (the structure of the successively)

4. From parent to child (nesting of structures)

Selector level

1. Inline style

2. Id

3. Class

4. Label

5. Pseudo-Class

Style= "" > #id. Class > #id tag > #id >. class tag >. class > tag tag > tag

Properties to avoid performance

. class {*color:expression (This.parentNode.currentStyle.color);}. class {width:expression (this.width>100? ') 100px ': ' Auto '); class {Filter:alpha (OPACITY=50);}

Picker Merge

. G-header,. G-main,. G-footer {color: #FFF;}

Picture optimization

1, picture quality requirements are high and non-transparent, using JPG

2, the picture quality requirements are high and need to be transparent, use PNG24

3, picture requirements generally, whether or not transparent, using PNG8

4. Animated pictures, using GIF or CSS3 or SVG or canvas

6, icon, made of font files or CSS3 files or SVG files

5. Compress pictures with tools

Multi-image merging

Multiple small icons can be combined into a single picture, but not more than 50k after merging

CSS Use

1. Avoid hack

2, CSS can do, do not use JS

3, after writing the CSS code need to compress the minimum file

CSS-Coding specifications