我的前端编码习惯 —— css篇

ID和Class命名风格

1.id 和 class 的命名总规则为：内容优先，表现为辅。⾸先根据内容来命名，⽐如 main-nav。如 果根据内容找不到合适的命名，可以再结合表现来定，⽐如 skin-blue，present-tab，col-main。

2.使用有含义的 id 和 class 名称。

    /* Not recommended: meaningless */
    #yee-1901 {}

    /* Not recommended: presentational */
    .button-green {}
    .clear {}
    /* Recommended: specific */
    #gallery {}
    #login {}
    .video {}

    /* Recommended: generic */
    .aux {}
    .alt {}

3.应该尽量简短，同时要容易理解。

    /* Not recommended */
    #navigation {}
    .atr {}
    /* Recommended */
    #nav {}
    .author {}

4.除非需要，否则不要在 id 或 class 前加元素名，否则会使选择器效率变低。

    /* Not recommended */
    ul#example {}
    div.error {}
    /* Recommended */
    #example {}
    .error {}

5.尽量使用 CSS 中可以简写的属性 (如 font)，可以提高编码效率以及代码可读性。

    /* Not recommended */
    border-top-style: none;
    font-family: palatino, georgia, serif;
    font-size: 100%;
    line-height: 1.6;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 0;
    /* Recommended */
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;

6.使用带前缀的命名空间可以防止命名冲突，同时提高代码可维护性。

    .adw-help {} /* AdWords */
    #maia-note {} /* Maia */
    ID 和 Class 命名分隔符
    选择器中使用连字符可以提高可读性。
    /* Not recommended: does not separate the words “demo” and “image” */
    .demoimage {}

    /* Not recommended: uses underscore instead of hyphen */
    .error_status {}
    /* Recommended */
    #video-id {}
    .ads-sample {}

7.id使⽤下划线进⾏连接，如 product_title。class使⽤连字符进⾏连接，如 product-lists。这样容易区分，同时对脚本 调试有帮助。

8.id和class名称中只能出现26个英⽂字母、数字、下划线'_'连接符'-' ，任何其它字符都是不被允许使⽤的。尽量⽤英⽂单词命名。对于某些产品特⾊词汇，也可以使⽤拼⾳，其它任何情况下都不使⽤拼⾳。

CSS格式规范

1.书写顺序:按照属性首字母顺序书写 CSS 易于阅读和维护，排序时忽略带有浏览器前缀的属性。

background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

2.块级内容缩进:为了反映层级关系和提高可读性，块级内容都应缩进。

    @media screen, projection {
      html {
        background: #fff;
        color: #444;
      }
    }

3.声明结束:每行 CSS 都应以分号结尾。

/* Not recommended */
.test {
  display: block;
  height: 100px
}
/* Recommended */
.test {
  display: block;
  height: 100px;
}

4.属性名和值之间都应有一个空格。

/* Not recommended */
h3 {
  font-weight:bold;
}
/* Recommended */
h3 {
  font-weight: bold;
}

5.声明样式块的分隔:在选择器和 {} 之间用空格隔开。

/* Not recommended: missing space */
#video{
  margin-top: 1em;
}

/* Not recommended: unnecessary line break */
#video
{
  margin-top: 1em;
}
/* Recommended */
#video {
  margin-top: 1em;
}

6.每个选择器都另起一行。

/* Not recommended */
a:focus, a:active {
  position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}

7.规则之间都用空行隔开。

html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}

8.属性选择器和属性值用单引号，URI 的值不需要引号。

/* Not recommended */
@import url("//www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(//www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}

9.不适用css expression，不使用复杂滤镜，尽量不设置容器的高度，保持容器高度可自适应。除某些并排的块需要高度等齐之外。height:100%;或height:1%;可能会遇到兼容性问题。
9.值为 0 时不用添加单位。

    margin: 0;
    padding: 0;

10.值在 -1 和 1 之间时，不需要加 0。

    font-size: .8em;

11.16进制表示法

    /* Not recommended */
    color: #eebbcc;
    /* Recommended */
    color: #ebc;

CSS 元规则

1.分段注释：用注释把 CSS 分成各个部分。

    /* Header */
    #adw-header {}
    /* Footer */
    #adw-footer {}
    /* Gallery */
    .adw-gallery {}

优化指南

浏览器对选择器读取的顺序是从右到左进行。选择器的最右边部分被称为“关键选择器”，它将决定你的选择器的效率如何。所以越具体的关键选择器，其性能越高。如果给选择器的效率排序，从高到低依次是：

• id 选择器（#id）

• 类选择器（.class）

• 标签选择器（p）

• 相邻选择器（h1 + p）

• ⼦选择器（ul > li）

• 后代选择器（li a）

• 通配符选择器（*）

• 属性选择器（a[rel='external']）

• 伪类选择器（a:hover, li:nth-child）
  基于此原则，以下给出具体的样式优化指南:

1.用于CSS的选择器应尽量具体，避免效率低下的普遍规则，并保证尽可能应用到所有需要应用的元素又不能影响无关的现有元素或后加的元素

2.选择器不能过于依赖HTML结构，当其中一个模块的结构变换顺序或加入一个新功能时，不要影响到已有的样式。

3.CSS3的各种属性和位置选择器虽然方便，但是匹配性能很低，而且过于依赖HTML结构，尽量少用，应用类名代替

4.不要在类名或ID名前面加上标签名或类名，否则会使选择器效率变低。

5.如果确信HTML结构比较固定，且选择器之间是父子关系，在不考虑低版本IE浏览器情况下可以加 > (子元素选择器)

6.在CSS规则中尽可能使用较少层级的后代选择器，最好不要超过三层，因为层级越多匹配越慢，并且越依赖HTML结构。有些层级的选择器完全没有必要，如ul li，一般可省去前面的ul。

7.SCSS层级书写方式不是为了让你更方便的嵌套层级，而是为了更方便的使用父级命名空间。

8.CSS应该以模块化开发为主，尤其一个独立功能的组件，同一功能和模板的样式应写在一起，并继承同一父选择器，创造一个良好的命名空间，以便于此功能模块的代码拿出来可以独立使用

.panel{}
.panel-header{}
.panel-body{}
.panel-footer{}

9.虽然每个选择器的各种样式可以层叠，但是加样式时必须要考虑尽可能的少影响到已有样式， 尽量⽤各标签的默认样式，也不要重置并不存在的样式，使得重⽤性很差。举个简单的例⼦， h1-h6 默认的加粗样式不要⽤样式去除，以免下次要⽤时再⽤加粗样式覆盖回来。

10.可以借助原本的继承关系来少加样式，当需要重写样式时，⽤选择器的权重关系覆盖⽽不要 ⽤!important。

11.尽量不要使⽤!important打乱原有CSS继承关系，除⾮此样式功能单⼀并且你确信此样式不会被其它样式应⽤，更多时候需要合理使⽤选择器的权重以避免不希望有的样式覆盖。更多权重⽅⾯的⽂章可以参考http://www.w3cplus.com/css/cs...

12.如果你想展现不同状态的链接样式，⼀定要记住 link-visited-hover-active 的顺序，或者简写为 LVHA

1. CSS 不要直接拿 div 标签当做选择器写样式，应该为其加类名。因为 div 属于⽆任何特殊意义 的标签，使⽤范围特别⼴，所以应特别注意对 div 应⽤样式。

14.不要写⽤不到的样式，应定期排查样式表中的样式，以免样式表越来越臃肿。

15.虽然 ID 选择器效率最⾼，但是建议在样式表中不⽤ ID 作为选择器，因为其权重很⾼，应留给⽤户去使⽤，以及更多的留给 JS 接口。

16.对于需要同时改变状态的⼀组元素，不要为每⼀个元素加样式，⽽是应该在⽗元素上加样式类统⼀处理。

 .parent-class .a.active {} 
 .parent-class .b.active {} 
 .parent-class .c.active {} 
 应改为：
 .parent-class.active .a {} 
 .parent-class.active .b {} 
 .parent-class.active .c {} 

17.任何时候不要⽤ html 和 body 选择器作为⽗选择器，除⾮⽤于 IE6 和 IE7 浏览器的 css hack。

CSS bug 排查⽅法

1.检查 CSS 是否正确

检查⼀下有⽆拼写错误、是否忘记结尾的 } 等。可以利⽤ CleanCSS 来检查 CSS 的拼写错误。 CleanCSS 本是为 CSS 减肥的⼯具，但也能检查出拼写错误。

2.利⽤ border 属性确定出错元素的布局特性

使⽤ float 或 position 属性布局⼀不⼩⼼就会出错。这时为元素添加 border 属性确定元素边界 或添加 background 属性，错误原因即⽔落⽯出。

3.利⽤各种虚拟机平台测试各 IE 版本中的效果

4.利⽤第三⽅测试⼯具或浏览器⾃带的调试⼯具调试

IE6、IE7 可以安装 IE developetoolbar V2/IE webdeveloper。Microsoft 有 script Editor，IE8+ 已经⾃带开发者⼯具，并且⾼版本的浏览器中可以模拟出低⾄ IE7 的效果。FF 上有著名的 Firebug， 以及 chrome 和 safari ⾃带的开发者⼯具