爱站程序员基地整理一下css优化相关的知识，以后看到后会慢慢补充。主要从以下三个方面进行总结：1、减少加载页面时候的数据传输量。2、提高页面渲染速度。3、css代码的可维护性。
一、减少加载页面时候的数据传输量
为了减少数据传输量，主要是减少css代码的体积，主要整理了以下几点：
1、压缩css文件
2、合并属性，样式复用，减少代码量
3、移除空的css规则
4、不声明多余的css样式，使用继承规则减少代码量
5、关于display：
display:inline后不应该再使用width、height、margin、padding以及float
display:inline-block后不应该再使用float
display:block后不应该再使用vertical-align
display:table-*后不应该再使用margin或者float
二、提高渲染速度
1、提高首屏渲染速度：
（1） 可以将首屏渲染的关键css内联到html文件中，这样能让首屏主要样式快速渲染，但是也不能内联太多的css，会影响数据交换的时间。
（2） css会阻塞渲染，由于关键css已经内联处理了，所以其他的css文件阻塞渲染就不是必须的了，可以采取异步加载的方式，防止阻塞页面的渲染速度
2、避免使用复杂的选择器，层级越少越好
3、样式复用，减少渲染花的时间
4、class与id选择符，少用 * 通配符
5、@import影响css文件的加载速度
6、关于渲染后的优化：重排与重绘见文末。
三、可维护性
1、可读性
推荐的书写顺序：
(1)位置属性(position, top, right, z-index, display, float等)
(2)大小(width, height, padding, margin)
(3)文字系列(font, line-height, letter-spacing, color- text-align等)
(4)背景(background, border等)
(5)其他(animation, transition等)
2、可扩展性
OOSS原则：
（1）结构与表现分离的命名方式
例如：
.btn-primary{} .btn-delete{}
可改成
.btn{} .primary{} .delete{}
（2）容器与内容分离的命名方式
例如：
#sidebar h3 {font-family: Arial, Helvetica, sans-serif;font-size: .8em;line-height: 1;color: #777;text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}
这些样式将运用到ID为“#sidebar”的子元素“h3”上，但是如果想把字体大小和文本阴影之外的样式运用到脚部具有相同效果的“h3”上，又应该怎么办？然后我们也许需要这样做：
#sidebar h3, #footer h3 {font-family: Arial, Helvetica, sans-serif;font-size: 2em;line-height: 1;color: #777;text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;}#footer h3 {font-size: 1.5em;text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;}
在上面的例子中，用后代选择器声明的样式是不能复用的，因为他们依赖于一个特定的容器（在这里例子里要么是侧栏要么是页脚）。
BEM命名法： BEM是Block，Element，Modifier的缩写。
例如：
.button-left_success
.button-left_success {float:left;color:#67C23A}
3、尽量将样式写在单独的css文件里面,在head元素中引用
好处：内容和样式分离，易于管理和维护，减少页面体积，css文件可以被缓存、重用，维护成本降低。
4、一些命名
头：header 内容：content/container 尾：footer 导航：nav 侧栏：sidebar 栏目：column 页面外围控制整体佈局宽度：wrapper 左右中：left right center 登录条：loginbar 标志：logo 广告：banner 页面主体：main 热点：hot 新闻：news 下载：download 子导航：subnav 菜单：menu 子菜单：submenu 搜索：search 友情链接：friendlink 页脚：footer 版权：copyright 滚动：scroll 内容：content 标签：tags 文章列表：list 提示信息：msg 小技巧：tips 栏目标题：title 加入：joinus 指南：guide 服务：service 注册：regsiter 状态：status 投票：vote 合作伙伴：partner 导航：nav 主导航：mainnav 子导航：subnav 顶导航：topnav 边导航：sidebar 左导航：leftsidebar 右导航：rightsidebar 菜单：menu 子菜单：submenu 标题: title 摘要: summary
关于重排与重绘
1、重绘：当一个元素的外观发生改变，但没有改变布局,重新把元素外观绘制出来的过程，叫做重绘。
2、重排：当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小)，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。
例如：添加或者删除可见的DOM元素；元素尺寸改变——边距、填充、边框、宽度和高度内容变化，比如用户在input框中输入文字浏览器窗口尺寸改变——resize事件发生时计算 offsetWidth 和 offsetHeight 属性设置 style 属性的值。
优化重排：
1、避免以下样式请求，为了给我们最精确的值，浏览器会立即重排+重绘。
offsetTop, offsetLeft, offsetWidth, offsetHeight scrollTop, scrollLeft, scrollWidth, scrollHeight clientTop, clientLeft, clientWidth, clientHeight getComputedStyle(), 或者 IE的 currentStyle
2、分离读与写
div.style.left = \'10px\';div.style.top = \'10px\';div.style.width = \'20px\';div.style.height = \'20px\';console.log(div.offsetLeft);console.log(div.offsetTop);console.log(div.offsetWidth);console.log(div.offsetHeight);
只触发了一次重排
3、样式集中改变
// badvar left = 10;var top = 10;el.style.left = left + \"px\";el.style.top = top + \"px\";// goodel.className += \" theclassname\";// goodel.style.cssText += \"; left: \" + left + \"px; top: \" + top + \"px;\";
4、缓存布局信息
// bad 强制刷新 触发两次重排div.style.left = div.offsetLeft + 1 + \'px\';div.style.top = div.offsetTop + 1 + \'px\';// good 缓存布局信息 相当于读写分离var curLeft = div.offsetLeft;var curTop = div.offsetTop;div.style.left = curLeft + 1 + \'px\';div.style.top = curTop + 1 + \'px\';
5、离线改变dom
在要多次操作dom引发重排之前，通过display隐藏dom，当操作完成之后，才将元素的display属性为可见，因为不可见的元素不会触发重排和重绘
6、 position属性为absolute或fixed
7、可以把动画效果应用到position属性为absolute或fixed的元素上，这样对其他元素影响较小
最后：这些都是一些平常搜集整理和自己用到的一些知识总结，以后看到其他的会逐步补充。
