CSS特性
1、渲染优先级
!important > 行内样式（权重1000） > ID 选择器（权重 100） > 类选择器（权重 10） > 标签（权重1） > 通配符 > 继承 > 浏览器默认属性
2、继承性
-
继承得到的样式的优先级是最低的，在任何时候，只要元素本身有同属性的样式定义，就可以覆盖掉继承值。
-
在存在多个继承样式时，层级关系距离当前元素最近的父级元素的继承样式，具有相对最高的优先级
3、层叠性
层叠性是指 CSS 样式在针对同一元素配置同一属性时（也就是有多个样式），依据层叠规则（权重）来处理冲突，选择应用权重高的 CSS 选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。
简单讲就是 权重越高，权限越大。
CSS选择器执行顺序
渲染引擎解析 CSS 选择器时是从右往左解析，这样做是为了减少无效匹配次数，从而匹配快、性能更优。(浏览器解析css为什么是从右开始呢？了解原理请自行百度噢！)
我们在书写 CSS Selector 时，从右向左的 Selector Term 匹配节点越少越好。
浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。
避免：div ui .item{……}
推荐：.item{……}
高效的 ComputedStyle
浏览器还有一个非常棒的策略，在特定情况下，浏览器会共享 Computed Style，网页中能共享的标签非常多，所以能极大的提升执行效率！
如果能共享，那就不需要执行匹配算法了，执行效率自然非常高。
如果两个或多个 Element 的 ComputedStyle 不通过计算可以确认他们相等，那么这些 ComputedStyle 相等的 Elements 只会计算一次样式，其余的仅仅共享该 ComputedStyle。
<section class="one">
<p class="desc">One</p>
</section>
<section class="one">
<p class="desc">two</p>
</section>
怎么高效共享？
1.TagName 和 Class 属性必须一样。
2.不能有 Style 属性。哪怕 Style 属性相等，他们也不共享。
3.不能使用 Sibling selector，譬如: first-child、 :last-selector、 + selector。
4.mappedAttribute 必须相等。
不能共享，因为使用了内联样式 style <p style="color:red">jartto's</p> <p style="color:red">blog</p> 可以共享元素以及属性都相同 <p align="middle">jartto's</p> <p align="middle">blog</p>
CSS 书写顺序
需要注意的是：浏览器并不是一获取到 CSS 样式就立马开始解析，而是根据 CSS 样式的书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的 CSS 样式进行解析，此时的 CSS 样式的遍历顺序完全是按照之前的书写顺序。
在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染。
比如：
width: 50px; height: 50px; font-size: 14px; position: absolute;
当浏览器解析到 position 的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染。
于是改进一下
position: absolute;
width: 50px;
height: 50px;
font-size: 14px;
这样就能让渲染引擎更高效的工作。
css建议书写顺序
1.定位属性 position display float left top right bottom overflow clear z-index 2.自身属性 width height padding border margin background 3.文字样式 font-family font-size font-style font-weight font-varient color 4.文本属性 text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow 5.CSS3 中新增属性 content box-shadow border-radius transform
优化策略
1. 使用 id 选择器非常的高效
/* Bad */ p#id1 {color:red;} /* Good */ #id1 {color:red;}
2. 避免深层次的 node
/* Bad */ div > div > div > p {color:red;} /* Good */ p-class{color:red;}
3. 不要使用 attribute selector
如：p[att1=”val1”]，这样的匹配非常慢。更不要这样写：p[id="id1"]，这样将 id selector 退化成 attribute selector。 /* Bad */ p[id="jartto"]{color:red;} p[class="blog"]{color:red;} /* Good */ #jartto{color:red;} .blog{color:red;}
4. 将浏览器前缀置于前面，将标准样式属性置于最后
.foo { -moz-border-radius: 5px; border-radius: 5px; }
5. 遵守 CSSLint 规则
font-faces 不能使用超过5个web字体 import 禁止使用@import regex-selectors 禁止使用属性选择器中的正则表达式选择器 universal-selector 禁止使用通用选择器* unqualified-attributes 禁止使用不规范的属性选择器 zero-units 0后面不要加单位 overqualified-elements 使用相邻选择器时，不要使用不必要的选择器 shorthand 简写样式属性 duplicate-background-images 相同的url在样式表中不超过一次
6. 减少 CSS 文档体积
移除空的 CSS 规则（Remove empty rules）。 值为 0 不需要单位。 使用缩写。 属性值为浮动小数 0.xx，可以省略小数点之前的 0。 不给 h1-h6 元素定义过多的样式。
7. CSS Will Change
WillChange 属性，允许作者提前告知浏览器的默认样式，使用一个专用的属性来通知浏览器留意接下来的变化，从而优化和分配内存。
8. 不要使用 @import
使用 @import 引入 CSS 会影响浏览器的并行下载。
使用 @import 引用的 CSS 文件只有在引用它的那个 CSS 文件被下载、解析之后，浏览器才会知道还有另外一个 CSS 需要下载，这时才去下载，然后下载后开始解析、构建 Render Tree 等一系列操作。
多个 @import 会导致下载顺序紊乱。在 IE 中，@import 会引发资源文件的下载顺序被打乱，即排列在 @import 后面的 JS 文件先于 @import 下载，并且打乱甚至破坏 @import 自身的并行下载。
9. 避免过分回流/重排（Reflow）
使用这些属性时浏览器会重新计算布局位置与大小。 常见的重排元素： width height padding margin display border-width border top position font-size float text-align overflow-y font-weight overflow left font-family line-height vertical-align right clear white-space bottom min-height
10. 减少昂贵属性
当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写 CSS 时，我们应该尽量减少使用昂贵属性，如： box-shadow。 border-radius。 filter。 :nth-child。
11. 依赖继承（如果某些属性可以继承，那么自然没有必要在写一遍。）
12. 高效利用 computedStyle
文章摘抄于公众号：前端瓶子君