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

Question

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

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

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

或覆盖相同样式表中的样式......

.container { width: 50% }

.touch .container { width: 100% }

似乎区别在于额外查询的速度与拥有一个大CSS文件的重量有什么关系？

Answer 1

你需要了解这里有3个细节。

1. 对服务器的调用。

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

3. 文件的重量。

所以答案是。

如果你写的css没有在属性之间的换行符，那么1个大文件将从2个文件中变得更大。并且回答重量原因1文件更好。

如果你有完整的页面可以使用.touch类更多的计算来得到带有类的文件。

所以，我要做的就是只调用一次服务器并制作一个文件，因为最好将所有样式加载到一起，并且很快就会调用服务器（重要的时间值）

Answer 2

我认为这两种选择都是完全有效的。

如果有大量特定于触摸的CSS代码，那么我会说是的，将它们与Modernizr一起使用以避免非触摸浏览器的额外负担。

但是，我倾向于通常使用覆盖样式来处理这类事情。

原因在于使用Modernizr选项，您将延迟加载触摸样式，因为在Modernizr脚本加载并准备好运行之前，它无法进行Modernizr测试。

因此，与作为主页面加载的一部分加载并为初始渲染做好准备相比，它仅在页面加载后加载，并且可能不会立即就绪。

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

这不是敲开Modernizr - 它是一个很好的工具 - 但是如果你能在不使用它的情况下做你需要的东西，它通常会更好。