CSS特性

1.优先级

!important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

2.继承性

• 继承得到的样式的优先级是最低的，在任何时候，只要元素本身有同属性的样式定义，就可以覆盖掉继承值。
  
• 在存在多个继承样式时，层级关系距离当前元素最近的父级元素的继承样式，具有相对最高的优先级。
  

可以继承的属性：

1. font-family、font-size、font-weight 等 f 开头的 CSS 样式。
   
2. text-align、text-indent 等 t 开头的样式。
   
3. color。
   

3.层叠性

层叠就是浏览器对多个样式来源进行叠加，最终确定结果的过程。

CSS 之所以有「层叠」的概念，是因为有多个样式来源。CSS 层叠性是指 CSS 样式在针对同一元素配置同一属性时，依据层叠规则（权重）来处理冲突，选择应用权重高的 CSS选择器所指定的属性，一般也被描述为权重高的覆盖权重低的，因此也称作层叠。

CSS 书写顺序

浏览器并不是一获取到 CSS 样式就立马开始解析，而是根据 CSS 样式的书写顺序将之按照 DOM 树的结构分布渲染样式，然后开始遍历每个树结点的 CSS 样式进行解析，此时的 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 selector 非常的高效

在使用 id selector 的时候需要注意一点：因为 id 是唯一的，所以不需要既指定 id 又指定 tagName：

/* 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. 将浏览器前缀置于前面，将标准样式属性置于最后

CSS那些事儿.pdf

下载

类似：

.foo {
  -moz-border-radius: 5px;
  border-radius: 5px;
}

可以参考这个 Css 规范。

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 自身的并行下载。

CSS那些事儿.pdf

下载

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. 高效利用 computedStyle

• 公共类。
  
• 慎用 ChildSelector。
  
• 尽可能共享。
  

更多请查看上文 - 高效的 ComputedStyle

11. 减少昂贵属性

当页面发生重绘时，它们会降低浏览器的渲染性能。所以在编写 CSS 时，我们应该尽量减少使用昂贵属性，如：

• box-shadow。
  
• border-radius。
  
• filter。
  
• :nth-child。
  

12. 依赖继承

如果某些属性可以继承，那么自然没有必要在写一遍。

13. 遵守 CSS 顺序规则