使用大型CSS文件的优缺点是什么？

Question

假设我在style.css中创建了100个选择器，其格式如下：

.width-1 {width: 1%;}
.width-2 {width: 2%;}
/* up to... */
.width-100 {width: 100%;}

对高度，颜色表也一样，并包括许多其他样式。最终结果可能是一个包含大约5000个选择器并占用300kB大小的css文件。

问题是：我为什么要或不应该这样做？选择器太多会导致性能问题吗？

优点：

• 一个大型css文件只需要一个http请求，
• 我可以为每个网站加载很多css功能，以防万一，

缺点：

• 显然 - 大css文件大小，
• IE 8-9在一个css文件中最多只能包含4095个选择器，
• 存在加载太多样式的风险，这些样式不会在当前视图中使用。

我对定位Android 2.3+和IE8 +

感兴趣

Answer 1

一个大文件的东西也不错。这就是我们将我们的东西缩小/连接成单个文件的原因。问题是当你使用那么多的实用程序类时，很多它们都不会被使用。每个选择器都会使浏览器查找该类的所有元素。所以这是一大堆（毫无价值）检查，看看是否有东西。

如果你想拥有一大堆实用风格的东西以方便使用，你应该考虑制作一些或更少的混合。这样你的css就不会包含那么多未使用/无用的内容（和选择器）。

所以我不会说文件大小不好，而是你所展示的选择器的极端缓慢和无用。

Answer 2

将每个宽度，高度，颜色等添加到每个单独的类中显然是愚蠢的。这只是内联CSS的一种解决方法。你也可以使用内联CSS，每个人都会变得更好。

回答你的问题： 使用大型CSS文件可能会产生很大的性能问题。 使用许多CSS文件可能也不是一个选项。 iOS仅支持每个文档包含有限数量的CSS文件。 （我找不到参考资料

结论：不要。像其他人一样，为像CSS这样的特定类定义一个样式。