css规范

命名

id采用驼峰式命名；
类名使用小写字母，以中划线分隔。

正确使用 Display 的属性

Display 属性会影响页面的渲染，请合理使用。

• display: inline后不应该再使用 width、height、margin、padding 以及 float；
• display: inline-block 后不应该再使用 float；
• display: block 后不应该再使用 vertical-align；
• display: table-* 后不应该再使用 margin 或者 float；

不滥用 Float

Float在渲染时计算量比较大，尽量减少使用。

多利用硬件能力，如通过 3D 变形开启 GPU 加速

一般在 Chrome 中，3D或透视变换（perspective transform）CSS属性和对 opacity 进行 CSS 动画会创建新的图层，在硬件加速渲染通道的优化下，GPU 完成 3D 变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积重绘和重排。
注：3D 变形会消耗更多的内存和功耗。
使用 translate3d 右移 500px 的动画流畅度要明显优于直接使用 left：

.ball-1 {
  transition: -webkit-transform .5s ease;
  -webkit-transform: translate3d(0, 0, 0);
}
.ball-1.slidein{
  -webkit-transform: translate3d(500px, 0, 0);
}
.ball-2 {
  transition: left .5s ease; left：0;
}
.ball-2.slidein {
  left：500px;
}

提升 CSS 选择器性能

CSS 选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解 CSS 选择器匹配的机制， 如子选择器规则：
#header > a {font-weight:blod;}
我们中的大多数人都是从左到右的阅读习惯，会习惯性的设定浏览器也是从左到右的方式进行匹配规则，推测这条规则的开销并不高。
我们会假设浏览器以这样的方式工作：寻找 id 为 header 的元素，然后将样式规则应用到直系子元素中的 a 元素上。我们知道文档中只有一个 id 为 header 的元素，并且它只有几个 a 元素的子节点，所以这个 CSS 选择器应该相当高效。
事实上，却恰恰相反，CSS 选择器是从右到左进行规则匹配。了解这个机制后，例子中看似高效的选择器在实际中的匹配开销是很高的，浏览器必须遍历页面中所有的 a 元素并且确定其父元素的 id 是否为 header 。
如果把例子的子选择器改为后代选择器则会开销更多，在遍历页面中所有 a 元素后还需向其上级遍历直到根节点。
#header a {font-weight:blod;}
理解了CSS选择器从右到左匹配的机制后，明白只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。我们把最右边选择符称之为关键选择器。——更多详情

1.避免使用通用选择器

浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。

/* bad */
.content * {color: red;}

2.避免使用标签或 class 选择器限制 id 选择器

/* bad */
button#backButton {…}
/* good */
#newMenuIcon {…}

3. 避免使用标签限制 class 选择器

/* bad */
treecell.indented {…}
/* good */
.treecell-indented {…}
/* better */
.hierarchy-deep {…}

4. 避免使用多层标签选择器。使用 class 选择器替换，减少css查找

/* bad */
treeitem[mailfolder="true"] > treerow > treecell {…}
/* good */
.treecell-mailfolder {…}

5. 避免使用子选择器

/* bad */
treehead treerow treecell {…}
/* good */
treehead > treerow > treecell {…}
/* better */
.treecell-header {…}

6. 使用继承

/* bad */
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
/* good */
#bookmarkMenuItem { list-style-image: url(blah) }

注意事项

-不允许有空的规则；
-元素选择器用小写字母；
-去掉数字中不必要的小数点和末尾的0；
-属性值’0’后面不要加单位；
-同个属性不同前缀的写法需要在垂直方向保持对齐；
-无前缀的标准属性应该写在有前缀的属性后面；
-不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
-不要在一个文件里出现两个相同的规则；
-用 border: 0; 代替 border: none;；
-选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；
-发布的代码中不要有 @import；
-尽量少用’*’选择器。

nec(网易) 的reset

/* reset */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
del,ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a,a:hover{color:#333;}