什么是使用大型CSS文件的优点和缺点?
比方说,我创建的style.css里面选择100具有以下模式:什么是使用大型CSS文件的优点和缺点?
.width-1 {width: 1%;}
.width-2 {width: 2%;}
/* up to... */
.width-100 {width: 100%;}
也做同样的高度,颜色表,包括多种风格。最终结果可能是一个包含大约5000个选择器并占用300kB大小的css文件。
问题是:为什么要或不应该这样做?选择器是否会导致性能问题?
优点:
- 一个大的CSS文件只需要一个HTTP请求,
- 我可以加载大量的CSS功能对于每一个网站,为了以防万一,
缺点:
- 显然 - 大的css文件大小,
- IE 8-9最多只能包含4095个选择器,最多只能放在一个css文件中,
- 加载太多样式的风险将不会在当前视图中使用。
我感兴趣的是针对Android 2.3以上版本和IE8 +
的一个大文件的事情是不是太糟糕。这就是为什么我们将我们的东西缩小/连接成单个文件。问题是当你使用那么多的实用程序类时,很多实用程序类都不会被使用。每个选择器都会使浏览器查找该类的所有元素。所以这是一大堆(毫无价值)检查,看看有没有东西。
如果你想有一大堆实用程序风格的东西容易使用,你应该考虑在sass或更少的一些mixin。这样你的CSS将不会包含尽可能多的未使用/无用的内容(和选择器)。
所以我不会说文件大小不好,它更多的是你显示的选择器的极端缓慢和无用。
在一天结束时sass文件被编译为使用与纯Css文件相同数量的选择器的css。 – 2015-02-11 13:39:00
不,mixins只会添加到您的文件的大小,如果你使用它。我的建议是不要将所有这些类都添加到一个css文件,因为它们没有意义。相反,如果需要,mixin会以%为单位输出宽度。所以这是在你的CSS更少的选择器,因为样式是一个更有用的选择器 – donnywals 2015-02-11 13:41:36
显然每个宽度,高度,颜色和更多的每个单独的类都添加了一些愚蠢的东西。这只是内联CSS的一种解决方法。你不妨使用内联CSS,每个人都会变得更好。
要回答你的问题: 使用大型CSS文件可能会有很大的性能问题。使用许多CSS文件的 也可能不是一个选项。 iOS仅支持每个文档包含的有限数量的CSS文件。 (我不能找到参考
结论:不要做其他人一样,并定义样式像CSS一类特殊的意思是
缩小的CSS并添加gzip压缩文本/ css mimetype – 2015-02-11 13:31:47
如果您打算为1到100%的每个百分比值创建一个选择器,那么您可以在需要时使用内联样式。如果您有预定义的宽度(例如12.5) %,25%,37.5%等),然后创建一些类。 – ElGavilan 2015-02-11 13:32:20
如果你的目标是android,你一定不会有那么大的css文件,不用担心IE,你甚至不会接近4095 – 2015-02-11 13:33:11