CSS多IE下兼容HACK写法

  1. 所有 IE浏览器适用： .ie_all .foo { ... }
  2. IE6 专用： .ie6 .foo { ... }
  3. IE7 专用： .ie7 .foo { ... }
  4. IE8 专用： .ie8 .foo { ... }

CSS书写规范

  • 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { : 400px; : 300px; }

  • 属性的书写顺序：

    • 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;

    • 按照元素模型由外及内，由整体到细节书写，大致分为五组：

      • 位置：position,left,right,float
      • 盒模型属性：display,margin,padding,,
      • 边框与背景：,background
      • 段落与文本：line-,text-indent,font,color,text-decoration,…
      • 其他属性：overflow,cursor,visibility,…

  • 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式

  • 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix

  • 勿使用冗余低效的 CSS 写法，例如：ul li a span { … }

  • 慎用 !important

  • 建议使用在 class/id 名称中的词语

    • 表示状态：a->active

    • 表示结构：h->header,c->content,f->footer

    • 表示区域：mn->main,sd->side,nv-navigation,mu->menu

    • 表示样式：l-list,tab,p_pop

常用CSS

左浮动、右浮动

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

因为左右浮动造成的父级浮动溢出，及使用方法

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

  2. .cl { zoom: 1; }

  3. <div>

  4. <div></div>
  5. </div>

大标题字体

  1. .wx, .ph { font-family: "Microsoft YaHei", "Hiragino Sans GB", STHeiti, Tahoma, SimHei, sans-serif; font-weight: 100; }

行内分割竖线

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

文字字体大小

  1. .xs0 { font-family: {SMFONT}; font-size: {SMFONTSIZE}; -webkit-text-size-adjust: none; }
  2. .xs1 { font-size: 12px !important; }
  3. .xs2 { font-size: 14px !important; }
  4. .xs3 { font-size: 16px !important; }

灰色文字

  1. .xg1, .xg1 a { color: {LIGHTTEXT} !important; }
  2. .xg1 .xi2 { color: {HIGHLIGHTLINK} !important; }
  3. .xg2 { color: {MIDTEXT}; }

高亮文字，1为橙色，2为蓝色

  1. .xi1, .onerror { color: {NOTICETEXT}; }
  2. .xi2, .xi2 a, .xi3 a { color: {HIGHLIGHTLINK} ; }

文字粗体

  1. .xw0 { font-weight: 400; }
  2. .xw1 { font-weight: 700; }

层下边线

  1. .bbda { -bottom: 1px dashed {COMMONBORDER}; }
  2. .bbs { -bottom: 1px solid {COMMONBORDER} !important; }

去除边框

  1. .bw0 { : none !important; }
  2. .bw0_all, .bw0_all th, .bw0_all td { : none !important; }

去除背景

  1. .bg0_c { background-color: transparent !important; }
  2. .bg0_i { background-image: none !important; }
  3. .bg0_all { background: none !important; }

外边距样式

  1. .mtn { margin-top: 5px !important; }
  2. .mbn { margin-bottom: 5px !important; }
  3. .mtm { margin-top: 10px !important; }
  4. .mbm { margin-bottom: 10px !important; }
  5. .mtw { margin-top: 20px !important; }
  6. .mbw { margin-bottom: 20px !important; }

内边距样式

  1. .ptn { padding-top: 5px !important; }
  2. .pbn { padding-bottom: 5px !important; }
  3. .ptm { padding-top: 10px !important; }
  4. .pbm { padding-bottom: 10px !important; }
  5. .ptw { padding-top: 20px !important; }
  6. .pbw { padding-bottom: 20px !important; }