经验内容仅供参考，如果您需解决具体问题(尤其法律、医学等领域)，建议您详细咨询相关领域专业人士。
请扫描分享到朋友圈Translate From：
本文版权归原作者和前端观察所有，不得转载。
在的第五章，我简要的提到@import 对于网站的性能有某些负面的影响，然后我在的演讲上深入探讨了这个问题，并创建了一些测试页面和HTTP瀑布状图表，这些在下面将会用到。对于这个问题的底线是：如果你想样式表并行载入，以使页面更快，请使用LINK 替代@import。
LINK vs. @import
大家都知道，有两种方法可以在你的页面中导入样式文件。你可以使用LINK标签:
&link rel='stylesheet' href='a.css' /&
或者使用@import 方法：
@import url('a.css');
我更喜欢使用LINK，因为它比较简单——而如果使用@import的话，你必须时刻记得要将@import放到样式代码的最前面，否则它将会不起作用。而且事实证明，避免使用@import 同样对网站性能有益。
@import @import
我将探究LINK和@import两种方式的不同。在这些例子中，有两个样式表: a.css和b.css。每个样式表都配置为需要花费两秒钟来下载，这样就比较容易的看出来它们对网站性能的影响。第一个例子使用@import 导入两个样式文件。这个例子，我们称之为，HTML代码可以写成这个样子：
@import url('a.css');
@import url('b.css');
如果你一直这种方式使用@import，那么就没有什么性能问题，尽管这可能会因为竞态条件而可能引起JavaScript错误。两个样式文件将同时并行下载，就像在图一中显示的那样(第一个小的请求是HTML该文件) 。问题出现在当@import嵌套入其它样式中或者和LINK联合使用的时候。
图一：一直使用@import 是可以的
LINK @import
这个的例子使用LINK加载a.css，使用@import导入b.css:
&link rel='stylesheet' type='text/css' href='a.css' /&
@import url('b.css');
在IE中(在6, 7, 和8中测试过)，这会导致样式表文件逐个加载，正如图二所示。并行下载资源是加速页面的一个关键。就像图示的那样，这种方法在IE中会导致页面需要更多的时间才能加载完成。
图二. 在IE中link混合@import 会破坏并行下载
LINK嵌套@import
在这个 例子中，a.css 通过LINK插入到页面中，然后a.css 通过@import规则来引入b.css:
&link rel='stylesheet' type='text/css' href='a.css' /&
在a.css中:
@import url('b.css');
这种方式同样阻止并行加载代码，但是这次是对于所有的浏览器。其实这个应该不会让我们感到奇怪吧，简单的想一下就能理解了。浏览器必须下载a.css先，并分析它，这个时候，浏览器发现了@import 规则，然后才会开始加载b.css.
图三. 在在一个通过LINK加载的的样式文件中使用@import将会在所有的浏览器里面打破并行下载。
LINK 阻断 @import
上面的例子做一个细微的变化，IE中会引起惊人的结果：使用LINK导入a.css 和一个新的样式文件proxy.css。proxy.css没有添加额外的样式，它只是用来通过@import 规则导入b.css.
HTML代码如下：
&link rel='stylesheet' type='text/css' href='a.css' /&
&link rel='stylesheet' type='text/css' href='proxy.css'&
proxy.css的代码:
@import url('b.css');
这个例子在IE中运行的结果，，在图四中显示。第一个请求是HTML文档。第二个请求是a.css (花了两秒钟)，第三个(很小) 的请求是proxy.css。第四个请求是b.css (也花费了两秒钟)。令人震惊的是，在下载a.css完成之前，IE不会开始下载b.css。但是在其它所有的浏览器中，这种情况不会发生，结果页面显示的也比较快。如下图五所示。
图四. IE中，LINK 阻断使用@import嵌入的其它样式文件。
图五. 在非IE浏览器中，LINK不会阻断@import 嵌入样式表。
多个@imports
这个的例子展示在IE中使用@import会引起资源被按照一个不同于预期的顺序下载。这个例子有6个样式表(每个将花两秒钟的下载时间)以及后面跟着一个js脚本文件(需要四苗种下载)。
@import url('a.css');
@import url('b.css');
@import url('c.css');
@import url('d.css');
@import url('e.css');
@import url('f.css');
&script type=&text/javascript& src=&one.js&&&/script&
看一下图六，最长的条条是耗时四秒钟的脚本。尽管它在代码里面被列在最后，但是在IE中，它被首先下载。如果脚本中包含的代码以来从样式表文件中应用的样式(比如getElementsByClassName)， 那么就将可能会发生意外的结果，因为脚本先于样式被加载，尽管开发人员将其置于代码的最后面。
图六 @import在IE中引发资源文件的下载顺序被打乱
使用LINK来引入样式更简单和安全：
&link rel='stylesheet' type='text/css' href='a.css' /&
&link rel='stylesheet' type='text/css' href='b.css'&
使用LINK 可确保样式在所有浏览器里面都能被并行下载。这个的例子演示了这一点，就像在图七中显示的那样。使用LINK 同样能保证资源按照开发人员制定的顺序下载。
图七：使用LINK确保在所有的浏览器里面都能并行下载
这些问题都需要考虑到IE。它非常不好的地方是，资源文件可能会在个别地方结束下载，所有浏览器在下载样式文件的时候应该执行一些前瞻以导入所有的@import规则并立即下载它们（通过@import导入的样式）。知道所有的浏览器都变成这种方式，我都会推荐避免使用@import并一直使用LINK 来插入样式。
根据读者的反馈，原作者增加了两项测试：和，每个例子都插入4个样式文件到HTML文件中。 使用LINK 加载proxy.css，然后proxy.css 使用@import 加载4个样式文件。的例子，在HTML文件中有4个LINK 标签来引入4个样式文件(这正是我推荐的方法)。这两个HTTP 瀑布图如图八和图九所示：
图八：使用@imports的LINK
图九：多个LINK
看一下的演示， 第一个问题是在proxy.css加载完成之前这四个样式文件不会开始下载，这在所有的浏览器里面一样。另一方面，的颜色立即同时下载这些样式文件。
第二个问题是IE改变下载顺序。我在页面的代码的最底部添加了一个10秒的脚本（图中最长的条条）。在所有的非IE浏览器中，@import样式文件(proxy.css文件中引入) 首先下载，然后才是脚本文件，严格的按照指定的顺序。然而，在IE中，脚本却先于@import 样式被插入，正如例子 在图八中显示的那样。这会导致样式文件花费更多的时间来下载，因为，在IE6和IE7中，它们还要等到长脚本用光仅有的两个可用连接中的一个。然而在样式文件没有下载完之前，IE不会在页面中渲染任何内容，以这种方式来使用@import会引起页面保持空白长达12秒钟。使用LINK 替代@import 可以保持加载顺序，正如图九中显示的那样。这样的话，页面渲染只需要四秒钟。
页面资源的加载时间被夸张的用来简单的查看发生了什么事情。但是对于那些使用窄带或网速比较慢的用户来说，特别是那些新兴的市场，这些响应时间可能有些远离实际。
在一个样式文件中使用@import会为页面总体加载时间增加更多一个返程（也就是增加页面的总体加载时间）
在IE中使用@import 将会引起文件的下载顺序被改变。这更会引起样式文件花费更长的时间来下载，这会阻碍页面的渲染，让人感到页面比较慢。
本文作者为《高性能网站设计》一书的作者，他是Yahoo网站性能团队的前领导人，目前效力于Google公司。他同时还是Firebug工作组的联合创立者，以及知名的网站性能分析工具的YSlow的创作者——前端观察
爱好前端设计与开发，崇尚一目了然的设计。现居深圳，就职于腾讯微信设计团队。
Follow me on twitter 。CSS选择器的权重与优先规则
我们在使用CSS对网页元素定义样式时经常会遇到这种情况：要对一般元素应用一般样式，然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢？
在CSS中，会根据选择器的特殊性来决定所定义的样式规则的次序，具有更特殊选择器的规则优先于具有一般选择器的规则，如果两个规则的特殊性相同，那么后定义的规则优先。
那么，又怎么来计算选择器的特殊性呢？下面这张图介绍了特殊性的计算方法：
我们把特殊性分为4个等级，每个等级代表一类选择器，每个等级的值为其所代表的选择器的个数乘以这一等级的权值，最后把所有等级的值相加得出选择器的特殊值。
4个等级的定义如下：
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div
p，权值为1。
例如上图为例，其中#NAV为二等选择器，.ACTIVE为三等选择器，UL、LI和A为四等选择器。则整个选择器表达式的特殊性的值为1*100+1*10+3*1=113
下面是一些计算示例：
注意：通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0。
我们再来看一个具体的例子：假如有以下组样式规则，你能判断出HTML代码中的两个标题是什么颜色吗？
#content div#main-content h2{
#content #main-content>h2{
color:blue
body #content div[id="main-content"] h2{
#main-content div.paragraph h2{
#main-content [class="paragraph"] h2{
div#main-content div.paragraph h2.first{
以下是HTML代码：
&div id="content">
&div id="main-content">
&h2>CSS简介&/h2>
&p>CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。&/p>
&div class="paragraph">
&h2 class="first">使用CSS布局的优点&/h2>
&p>1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.&/p>
判断出来了么？答案是：两个标题都是红色的！
让我们来一起算算六个样式规则各自的特殊性的值：
第一个特殊性的值=2*100+2*1=202
第二个特殊性的值=2*100+1=201
第三个特殊性的值=1*100+1*10+3*1=113
第四个特殊性的值=1*100+1*10+2*1=112
第五个特殊性的值=1*100+1*10+1*1=111
第六个特殊性的值=1*100+2*10+3*1=123
清楚了吧，第一个样式规则以其202的高分一举夺得了本次样式选择器特殊性大赛的冠军，后面一些规则虽然看起来好像更复杂，但特殊性并不是拼谁的选择器表达式写得更长，ID选择器才是王道！
理解选择器的特殊性很重要，特别是在修复bug的时候，因为你需要了解哪些规则优先及其原因。
如果你遇到了似乎没有起作用的CSS规则，很可能是出现了特殊性冲突。请在你的选择器中添加他的一个父元素的ID，从而提高它的特殊性。如果这能解决问题，就说明样式表中其他地方很可能有更特殊的规则，它覆盖了你的规则。如果是这种情况，你可能需要检查代码，解决特殊性冲突，让代码尽可能简洁。
随机文章推荐
(44) (105) (232) (53) (34) (314) (39) (35) (21) (4) (1) (9) (14) (56) (66) (1) (160) (27) (57) (31) (77) (31) (12) (7) (18) (61)
注：如需转载本文，请注明出处（原文链接），谢谢。更多精彩内容，请进入首页。
你也许还会对以下文章感兴趣
喜欢本文，就分享它吧
您的名字：
您的邮件：
您的网站：
copyright (C) 2009 简明现代魔法 && 学习、分享、进步
power by Gonn 感谢所有关心和支持本站的朋友们一、CSS框架
框架目的：
给出一个相对规范的开发方法，给出一些具体的可以操作流程内容，按照框架的思路来方便灵活的完成一个css设计。规划了样式应用的代码组织模式，进行页面布局的一种灵活的组合方式。
目前CSS框架：
国内比较出名好像是YUI。
二、框架的应用
CSS能形成框架应用主要是归功于样式选择器的层叠和继承。
CSS的选择器有：类型选择器，后代选择器，ID选择器，类选择器，高级选择器（属性选择器，子选择器，相邻选择器。浏览器支持不一）及这些选择器的组合应用。
1、层叠和特殊性
那么这些选择器在使用过程中，如何确定显示内容的最终渲染效果？
这主要借助于CSS的层叠和特殊性。样式表的应用规则如下：
1). 首先根据样式表的重要度次序来应用样式表，重要性从上到下降低！important的用户样式！important的作者样式作者样式用户样式浏览器定义的样式
2）在确定样式表的重要次序的基础上根据特殊性觉得规则的应用。
每种选择器被分配一个数字值。然后，将规则的每个选择器的值加在一起，计算出规则的特殊性。
选择器的特殊性分成四个成分等级：a、b、c和d。
l如果样式是行内样式，那么a = 1。
lb = ID选择器的总数。
lc = 类、伪类和属性选择器的数量。
ld = 类型选择器和伪元素选择器的数量。
使用这些规则可以计算任何CSS选择器的特殊性。
表1-1给出一系列选择器以及相应的特殊性
注：用style属性编写的规则总是比其他任何规则特殊；具有ID选择器的规则比没有ID选择器的规则特殊；具有类选择器的规则比只有类型选择器的规则特殊；
3）如果两个规则的特殊性相同，那么后定义的规则优先。
4) !important :如果应用这个规则，那你可以不管上面2，3两点的复杂的规则了，但若过多的应用此!important将破坏样式的层叠应用。
2、继承，重载，抽象，实例
&元素 (继承上文) Class="A B ..." Id="ID"="属性:值;"&
&子&... &/子&
1.继承，重载的对象是样式的某一个属性。
2.上文环境：不由元素自身的class，id，style行里样式决定的，由雨它所处的祖先级元素的环境而自动拥有的样式属性。
3.元素的样式属性规则Class(A) & Class(B) & Class(…) & ID & Style，对于应用规则越往右，优先级越高。
元素首先会根据元素所在的上文拥有一些样式属性，
前面有的后面没有的，后面默认继承前面的样式，
前面没有的后面有的，可看作增加了私有的样式
前面有的后面也有的，可看作重载了相同属性的样式。
4.同类型的元素（相同标签名），同类元素（块，行元素）
5.操作对象：应用某规则的元素及元素的后代。
6.一个元素的样式由其上文和该元素所设置的class，id，style行里样式确定，且该元素的设置也将影响其后代元素的样式属性，
7.&父&的样式设置，影响其所有的后代的部分属性（共同拥有的那部分属性），&元素&继承、重载并私有新的样式属性，且在重载的部分中赋予&子&中由&父&确定的那部分新的样式。
8.CSSOO类，类群。
CSSOO类：选择器规则 {类主体}
选择器规则：是各种选择器的组合。
类主体：属性：值;的集合。
CSSOO类只有属性，没有方法（扩展：如果拥有方法 js？c#？）
由CSSOO类组成的块叫类群。
9.模型应用
语义片段，CSSOO类群
10.父子元素的继承，重载… 元素自身的class id style行里元素设置的继承，重载。
11.实例化：符合选择器规则的语义片段的应用。
抽象、继承，重载，实例的我们是看不到一个明显的过程的，没有像程序一样的显示的声明，一切都是思考后的一种结果。
CSS的继承本身是指应用样式的元素的后代会继承该元素的某些属性，这些属性通常是父元素和子元素都有的属性，一般是修饰方面的属性，比如颜色，在结构排版方面的一般不会继承。
要涉及框架的应用，可以将继承的理解扩展开来，css本身的继承只作为一个内在的方面。
下面分析理解CSSOO的继承，及重载，抽象，实例。(个人将CSS的类面向对象的应用，称为CSSOO.)
CSSOO的类可以理解为一条条样式规则及规则组合。
形如：选择器{属性：值}。
.testClass1 {}
.testClass1 h1{}
.testClass1 p{}
#testId {}
层叠和特殊性为CSSOO提供应用规则，通过这种规则的组合，可以达到类面向对象化的效果。
有点需要指出，框架的应用必须形成有语义结构的html代码结构模块，下面会结合土豆网的一个box的代码片段进行这个CSSOO的分析理解。
1)抽象css的类class的自身定义就是提取元素中共用的东西放在一个class里面，以便需要相同表现的元素进行应用。这是css的自身的一种抽象应用。css的类的规则定义是以： .test{属性:值;}的方式定义的。比如给所用的img设置成3px red边框，比如给 某些div，某些table设置共同的背景色等等。CSSOO的抽象：
将公用的重复的东西抽象出来作为基类class。基类可以分成多个方面.
可以利用类型选择器，和class类选择器及高级选择器的规则组合对样式进行提取抽象，抽象出来的可以成为父类。
对于ID选择器在抽象中尽量较少应用，因为id选择器不利于抽象和继承。如果应用id选择器定义样式，这个样式类就相当于程序中的类加了sealed修饰符，无法被继续。Id选择器定义样式类一般用于比较具体的类中。
抽象分为全局抽象和局部抽象。全局抽象：
常是通过类型选择器将元素的默认样式重置统一成你想要表现出的样式。以及为一些元素的包含关系进行一些样式定义。如CSS框架应用中的reset.css，typography.css比如：*{padding:0;margin:0} , div p {color:}
还有是通过class类定义一些比较倾向于某个方面的样式，大多是表象样式。这些样式一般是与局部抽象无关的，但可以用于任何元素的样式，这些类可以统一风格，增加使用灵活性。局部抽象：
我们自行定义的一些语义模型，并对这些模型设置一个统一的样式应用，如土豆网的box盒模型，为引用box盒模型的实例提供相同表现。
CSS框架除了提供分栏布局的模型外一般是不提供这些局部抽象的，局部抽象是根据我们的具体项目使用，定义一些模型。
上面的这些抽象都将作为一个父类来继承。
2)继承与重载
一个语义代码结构不附加任何的行内样式，不添加id选择器，不添加class类，这个元素将按照CSS本身继承特性拥有一些样式。
当添加id或者class时，就可以理解为发生了继承这一个行为，当添加的类中含有全局抽象中定义的属性时，会按照层叠和特殊性的原则进行重载。
如：&div class="traffic car" id="mycar"&&/div&
traffic是抽象出来的交通工具的样子， car里描述了一些小轿车特有的样子，mycar是描述了我的车拥有的特征。
通过上面的一条html片段，基本能够了解CSSOO的一个思想。
继承的行为是在class="traffic car"这样的过程中能够发生的。
当car中拥有需要修改traffic里的一些外观属性时，就发生了重载，比如traffic将交通工具的颜色默认设置成黑色，而car里定义默认的颜色为红色。就会放生重载。重载是针对已经拥有的属性来说的。
继承是两方面，一种是隐式的集成，就是继承全局抽中里，利用类型选择器进行定义的样式规则，另一种就是在如上面的html片段中产生的一种继承行为，即car 继承了traffic描述的交通工具的基本外观特征。
3)实例：对于某一个元素应用是就是将这个元素实例化。简单点理解，就是拷贝相同的语义结构代码，并应有CSSOO的类规则。如果灵活实例化的问题，是一个CSS框架的好坏的关键, 也是判断CSSOO的样式框架是否合理一个标准。以怎样的一种方式进行实例化，是一个非常重要的可研究的地方。
3、结合土豆网box模型实例（未整理完）
左图是土豆网BOX模型的语义片段。
三、CSS框架的组织
CSS框架首选组织css的文件维护结构。通常将css按照逻辑及涉及的方面分化成几个样式表文件。一般会从以下几个方面进行组织。
1.重置浏览器的默认风格。这个应用主要是统一各种浏览器之间的默认设置的差异
2.组织一种部件的应用模型比如豆瓣的导航模型，盒模型，包装模型， blueprint框架的布局排版的组合应用
3.统一某些具体标签元素及元素组合模型的表现。比如，form表单里的各种控件标签的表现风格；组合的盒模型，导航元素组合；自己设置的布局组合
4.创建通用css类。
5.hack文件：主要是为平衡各个浏览器的版本bug的文件
比如blueprint中：
reset.css 充值样式 typography.css 排版 grid.css 布局（能作为框架的，这是个关键） form.css 表单部件
widgets.css 在具体项目中定义的模型，如土豆网的box模型，pack包装模型
一个css框架的好坏个人感觉主要在排版和项目中的模型是否有好的灵活的设计。
如果使用css框架？ （未整理完）
如果使用主要涉及到性能问题。因为css分成多个文件，会增加http请求数，如果放到一个文件里面，又会降低框架使用的灵活性。
如何能做到灵活性？理想方案：一个带参数的请求，服务器端动态选择组合输出文件。
结合Blueprint CSS 框架进行分析（未整理完）
Blurprint的灵活布局
和blueprint的grid.css进行分析,基于网格的布局
相关概念：
层叠：css的全称为层叠样式表（Cascading Style Sheets）。从命名可以看出层叠是样式表非常重要的一个属性。按照一定的规则，规则高的样式会覆盖规则低的样式。
继承(inheritance): 继承（的规则）允许样式不仅应用于某个特定的元素（父元素），而且应用于其后代（子元素）。
特殊性(specificity)：即某条CSS规则特殊性越高，它的样式越优先被采用，网页就会显示它所指定的样式。
浏览器样式：不同的浏览器厂家，都会在浏览器中给所有的html文章设置一种共同的特征，比如：你是比尔盖茨，你喜欢把IE的字体的大小设置成一个苹果那么大（呵呵，夸张了）。正式由于浏览器默认样式的存在，所以基本所有的CSS应用时为了统一绝大多数的默认样式，都会对其进行重载。所以，css的框架里都会有一个reset.css重置一些默认的，及你想要统一的一些样式。
用户样式：用户是指访问网站的人，由于浏览器会提供一些辅助功能，所以，用户可以调整一些网站作者没有定义的样式属性，比如调整字体为红色，但这个前提是作者没有定义过字体的颜色，如果定义了，那么用户调整将不起作用。（如：IE: “工具”&”Internet选项”&“辅助功能“& “用户样式表”）。
作者样式：就是指网站设计者设计的css样式，根据样式放置方式的不同，作者样式分为内联样式，外联样式，内嵌样式。三者的优先级是：内联&内嵌&外联.
内联样式：即行内样式，在元素的style属性中设置的样式
外联样式：在header中用link标签导入的样式
内嵌样式：在header中用&style&标签编写的样式
!important规则：在任何声明里利用这个规则声明的，将拥有更高的优先级。
样式应用规则：指通过一种选择的规则，在编写的样式中确定哪种将最终应用在元素上，显示出最后的效果。规则应用的对象是样式的某个属性，而不是用{ }括起来的内容，当样式的某一个方面的属性在不同的样式中定义时，将按该规则进行选择。
CSSOO:个人对CSS的一种相似于面向对象应用的简写，指css的抽象，继承，重载，实例的面向对象化的一种规则。
CSSOO的对象及实例化：一个具有一定语义结构的html代码块模型，及引用的CSSOO的类的样式规则应用。将这样的一个代码块和规则拷贝到页面中使用的过程，可以引申为对象的实例化的过程。
表象样式：诸如字体大小，颜色方面的样式属性。
结构样式：诸如长，宽，绝对定位，相对定位，等等确定元素将在屏幕的某个位置呈现的属性。如width,height，padding， margin， border-width， float,display, clear，position等等
阅读(...) 评论()如何提升 CSS 选择器性能 | 纳岚博客
& 如何提升 CSS 选择器性能
CSS 选择器性能损耗来自？
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间，所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制， 如子选择器规则：
header & a {font-weight:}
我们中的大多数人都是从左到右的阅读习惯，会习惯性的设定浏览器也是从左到右的方式进行匹配规则，推测这条规则的开销并不高。
我们会假设浏览器以这样的方式工作：寻找 id 为 header 的元素，然后将样式规则应用到直系子元素中的 a 元素上。我们知道文档中只有一个 id 为 header 的元素，并且它只有几个 a 元素的子节点，所以这个CSS选择器应该相当高效。
事实上，却恰恰相反，CSS选择器是从右到左进行规则匹配。了解这个机制后，例子中看似高效的选择器在实际中的匹配开销是很高的，浏览器必须遍历页面中所有的 a 元素并且确定其父元素的 id 是否为 header 。
如果把例子的子选择器改为后代选择器则会开销更多，在遍历页面中所有 a 元素后还需向其上级遍历直到根节点。
a {font-weight:}
理解了CSS选择器从右到左匹配的机制后，明白只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。我们把最右边选择符称之为关键选择器。
如何减少 CSS 选择器性能损耗？ Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序：
id选择器（#myid）
类选择器（.myclassname）
标签选择器（div,h1,p）
相邻选择器（h1+p）
子选择器（ul & li）
后代选择器（li a）
通配符选择器（*）
属性选择器（a[rel="external"]）
伪类选择器（a:hover, li:nth-child）
根据以上「选择器匹配」与「选择器执行效率」原则，我们可以通过避免不恰当的使用，提升 CSS 选择器性能。
1、避免使用通用选择器
.content * {color:}
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素，直到文档的根节点。因此其匹配开销是非常大的，所以应避免使用关键选择器是通配选择器的情况。
2、避免使用标签或 class 选择器限制 id 选择器
button backButton {…}
.menu-left newMenuIcon {…}
backButton {…}
newMenuIcon {…}
3、避免使用标签限制 class 选择器
treecell.indented {…}
.treecell-indented {…}
.hierarchy-deep {…}
4、避免使用多层标签选择器。使用 class 选择器替换，减少css查找
treeitem[mailfolder="true"] & treerow & treecell {…}
.treecell-mailfolder {…}
5、避免使用子选择器
treehead treerow treecell {…}
#BETTER, BUT STILL BAD
treehead & treerow & treecell {…}
.treecell-header {…}
6、使用继承
bookmarkMenuItem & .menu-left { list-style-image: url(blah) }
bookmarkMenuItem { list-style-image: url(blah) }
作为一名前端工程师，应该具有「提升 CSS 选择器性能」的意识，但实际应用中，是否需要完全贯彻这些原则呢？这是一个探索「追求高性能」与「可维护性」两者平衡的问题。
对于「淘宝」，每个页面的 DOM 元素超过1000个以上的网站来说，通过限制 CSS 选择器，改善性能是具有实际意义的。但对于普通网站，我更倾向于保证「语义化」和「可维护性」的前提下，提升 CSS 选择器性能。
您可能也喜欢:
创业时的“415”原则你知道吗?创始团队不要超过四个人，中间一定要有一个人是老大，而且此人股份必须超过50%，否则团队必定分崩离析。近日，在中信出版社承办的...
编者按：本文来自Chance Jiang的投稿，翻译自问答社区的一个Joel Spolsky的回帖。Joel Spolsky 是曾是 MS Excel 产品的核心开发，目前是纽约软...
来源：GrapeCity
Google Chrome在招来了FireFox，FireBug的项目组领导人John J. Barton后，Chrome Dev Tools也变的越来越好用，越来越方便了。本文根据Google...}