CSS特性
1.优先级
选择器 | 权重 |
---|---|
!important | 最高优先级 |
内联样式 | |
ID | |
类/伪类/属性 | |
元素/伪元素 | |
通配符/子选择器/相邻选择器 | 最低优先级 |
!important > 行内样式 > ID 选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
2.继承性
-
继承得到的样式的优先级是最低的,在任何时候,只要元素本身有同属性的样式定义,就可以覆盖掉继承值。
-
在存在多个继承样式时,层级关系距离当前元素最近的父级元素的继承样式,具有相对最高的优先级。
可以继承的属性:
-
font-family
、font-size
、font-weight
等f
开头的 CSS 样式。 -
text-align
、text-indent
等t
开头的样式。 -
color
。
3.层叠性
层叠就是浏览器对多个样式来源进行叠加,最终确定结果的过程。
CSS
之所以有「层叠」的概念,是因为有多个样式来源。CSS
层叠性是指 CSS
样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的 CSS
选择器所指定的属性,一般也被描述为权重高的覆盖权重低的,因此也称作层叠。
CSS 书写顺序
浏览器并不是一获取到 CSS
样式就立马开始解析,而是根据 CSS
样式的书写顺序将之按照 DOM 树的结构分布渲染样式,然后开始遍历每个树结点的 CSS
样式进行解析,此时的 CSS
样式的遍历顺序完全是按照之前的书写顺序。
建议顺序:
-
定位属性
position display float left top right bottom overflow clear z-index
-
自身属性
width height padding border margin background
-
文字样式
font-family font-size font-style font-weight font-varient color
-
文本属性
text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow
-
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. 将浏览器前缀置于前面,将标准样式属性置于最后
类似:
.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
自身的并行下载。
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. 依赖继承
如果某些属性可以继承,那么自然没有必要在写一遍。