2014-10-28 书写高效的CSS

hjzheng commented 10 years ago

书写高效的CSS

浏览器样式匹配规则

关键选择器
从右往左
关键选择器

选择器的最后面的部分即为关键选择器(即用来匹配目标元素的那部分,而不是该元素的父辈元素)

 #header, a img, h1 + [title] {
    ... ...
 }
 //关键选择器分别为 #header, img, [title]

拆分样式

为了提高样式匹配效率,浏览器根据关键选择器将样式拆分为四种类型,放置到4张不同的哈希表里:

ID规则
Class规则
标签规则
通用规则(不符合上面的都是)
ID规则

这一类别包含了那些将 ID 选择器作为关键选择器的规则

button#backButton {…} /* This is an ID-categorized rule */
#urlBar[type="search"] {…} /* This is an ID-categorized rule */
table > tr > td#myCell:active {…} /*This is an ID-categorized rule*/

Class规则

如果一个规则将一个 class 作为它的关键选择器,那么它就属于该类别.

button.settingButton {…} /* A class-based rule */
.fancyText {…}    /* A class-based rule */
ul > .menu-left[checked="true"] {…} /* A class-based rule */

标签规则

如果既没有 class 也没有 ID 来作为关键选择器，那么接下来的候选者就是标签类别.如果一条规则将一个标签作为它的关键选择器,那么这条规则就属于该类别.

 table {…} /* A tag-based rule */
 ul > li {…} /* A tag-based rule */
 input[type="checkbox"] {…} /* A tag-based rule */

通用规则

不属于上面那些类别的规则都属于这个类别

   [hidden="true"] {…} /* A universal rule */
   * {…} /* A universal rule */
   ul > [title="hehe"] {…} /* A universal rule */

从右向左

浏览器读取你的选择器, 遵循的原则是从选择器的右边到左边读取. 先从关键选择器开始匹配规则, 然后左移, 匹配祖先, 成功, 持续左移, 直到和规则匹配, 或者是因为不匹配而放弃。所以,对于一个给定的元素, 需要匹配的规则越少, 样式的解析就会越快.

高效CSS指南

避免通用规则
不要用标签名或 classes 来限制 ID 规则
不要用标签名限制 class 规则
尽量使用最具体的类别
避免后代选择器
属于标签类别的规则永远不要包含子选择器
在使用子选择器的地方想想为什么
依赖继承
如何测试 ?

Chrome30(不包含30)以下的版本包含有CSS selector profile可以对选择器进行性能测试

CSS样式分析

analyze-css

参考资料:

书写高效的CSS

hjzheng commented 10 years ago

you can get PPT from 书写高效的CSS

hjzheng commented 10 years ago

史上最全浏览器 Hack: http://browserhacks.com/

hjzheng / CUF_meeting_knowledge_share