Discuz built-in common CSS code analysis

CSS multi-ie compatible hack notation

All IE browsers apply:. ie_all. foo {...} IE6 dedicated:. IE6. foo {...} IE7 dedicated:. IE7. foo {...} IE8 dedicated:. ie8. foo {...}

CSS Writing Specifications

The
1. property is written on one line, with spaces between attributes, property names and values, and between attributes and ' {} ', for example:. class {width:400px; height:300px;}
2. the order in which properties are written:
   1. properties for special browsers should be written before standard properties such as:-webkit-box-shadow:;-moz-box-shadow:; Box-shaow:;
   2. according to the element model from the outside and inside, from the whole to the details of writing, roughly divided into five groups:
      1. location: position,left,right,float
      2. Box model properties: Display,margin,padding, Width,height
      3. Border and background: Border,background
      4. paragraph and text: Line-height,text-indent,font,color,text-decoration, ...
      5. Additional properties: Overflow,cursor,visibility,...
3. Add a new selector rule with caution, especially if the ID is not abused, inherit and reuse existing styles as much as possible
4. selectors, attributes, and values in lowercase (except for the color values in the format), the abbreviated selector name must indicate the full name before the abbreviation, for example. CL-Clearfix
5. do not use redundant, inefficient CSS notation, such as: UL Li a span {...}
6. use!important with caution
7. suggested words in Class/id name
   1. indicates state: A->active
   2. represents structure: H->header,c->content,f->footer
   3. represent range: Mn->main,sd->side,nv-navigation,mu->menu
   4. presentation style: L-list,tab,p_pop

Common CSS

• Left float, right float

. z {float:left;}. y {float:right;}

• Parent floating overflow due to left and right floating, and how to use

. cl:after {content: "."; display:block; height:0; clear:both; visibility:hidden;}. cl {zoom:1;}

• Big Title font

. WX,. ph {font-family: "Microsoft Yahei", "Hiragino Sans GB", Stheiti, Tahoma, Simhei, Sans-serif; font-weight:100;}

• Inline Split Vertical Line

. pipe {margin:0 5px; color: #CCC;}

• Text font size

. xs0 {font-family: {smfont}; Font-size: {smfontsize};-webkit-text-size-adjust:none;}. XS1 {font-size:12px!important;}. XS2 {font-size:14px!important;}. XS3 {font-size:16px!important;}

• Gray text

. XG1,. Xg1 a {color: {lighttext}!important;}. Xg1. Xi2 {color: {highlightlink}!important;}. Xg2 {color: {midtext};}

• Highlighted text, 1 orange, 2 blue

. xi1,. onerror {color: {noticetext};}. Xi2,. Xi2 A,. Xi3 a {color: {highlightlink};}

• Text Bold

. xw0 {font-weight:400;}. XW1 {font-weight:700;}

• Bottom edge of layer

. bbda {border-bottom:1px dashed {commonborder};}. BBS {border-bottom:1px solid {commonborder}!important;}

• Remove border

. bw0 {Border:none!important;}. Bw0_all,. Bw0_all th,. bw0_all td {Border:none!important;}

• Remove background

. bg0_c {background-color:transparent!important;}. bg0_i {Background-image:none!important;}. Bg0_all {Background:none!important;}

• Margin style

. mtn {margin-top:5px!important;}. MBN {margin-bottom:5px!important;}. MTM {margin-top:10px!important;}. MBM {margin-bottom:10px!important;}. MTW {margin-top:20px!important;}. MBW {margin-bottom:20px!important;}

• Inner margin style

. ptn {padding-top:5px!important;}. PBN {padding-bottom:5px!important;}. PTM {padding-top:10px!important;}. PBM {padding-bottom:10px!important;}. PTW {padding-top:20px!important;}. PBW {padding-bottom:20px!important;}

Discuz built-in common CSS code analysis