覆盖CSS与使用Modernizer选择性加载CSS（YepNope）

不确定如何测试这一点，但是通过使用Modernizer.load的查询加载CSS样式表是否会提高性能，而不仅仅是在同一样式表中使用CSS类名覆盖规则

例如，如果一个设备有触摸支持，那么我有一个不同的布局加载，它是更快地做

{
  test: Modernizr.touch,
  yep : 'css/touch.css',
  nope: 'css/base.css'
}

或者覆盖同一样式表中的样式

.container { width: 50% }

.touch .container { width: 100% }

---

看起来区别在于额外查询的速度与拥有一个大CSS文件的重量？

您需要了解这里有3个细节

对服务器的调用

计算所有父样式的浏览器时间

文件的重量

所以答案是

如果在属性之间没有换行符的情况下编写css，那么1个大文件将比2个文件更大。这是对权重的回答，因为1文件更好

如果你有整页要做。touch类更适合用来计算文件和类

---

因此，我要做的是只调用一次服务器并生成一个文件，因为最好将所有样式加载在一起，并且对服务器的调用（重要的时间值）很快就会出现

我认为这两个选项都是完全有效的

如果有大量特定于touch的CSS代码，那么我会说是的，将它们与modernizer一起引入，以避免非touch浏览器的额外负担

然而，我更倾向于对这类事情使用覆盖样式

这样做的原因是，使用Modernizer选项，您将延迟触摸样式的加载，因为在加载Modernizer脚本并准备运行之前，它无法进行Modernizer测试

因此，与作为主页加载的一部分加载并准备好进行初始呈现相比，它只在页面加载之后加载，可能不会立即准备好

其结果可能是在加载触摸样式之前加载并显示页面。不理想

---

这并不是要打击Modernizer——这是一个很好的工具——但如果你不用它就能做你需要做的事情，它通常会更好。

有多少触摸css？这是理论上的，但我想为了论证起见，它们的重量是一样的。稍微撇开一点：

Modernizer.touch

不会测试设备是否具有触摸功能，只有浏览器能够启动。。。小心这个（）

Modernizer.touch

在任何设备上的IE10中都是错误的，因为它不遵循touch Events规范，而是使用。事实上，

modernizer.touch

在v3.0中被废弃，取而代之的是

modernizer.touchevents

和

modernizer.pointereEvents

，以消除这种混乱。