如何使css更小？ [英] How to make css smaller?

问题描述

我有一个CSS文件，样式的整个页面，它得到Gzipped和它的缩小，但它仍然是200kb。还有什么我可以做的吗？

解决方案

我在看看你的个人资料，发现www.charliecarver.me，看看那个，并找到一个css文件。如果这是你的网站和你正在谈论的CSS文件，你重复大量的陈述。例如，css文件的第1到13行如下所示：

  body {
 / ** css代码... ** / 
} 
  

15到17行如下所示： p1，p2，h3，h4，h5，h6，h1，h1，h1，h1，h1， pre，code，form，input，textarea，p，blockquote，th，td {
/ ** css code ... ** /
}
/ pre>

第432至434行：

  html&内容{
 / ** css code ... ** / 
} 
  

Line 826 to 828：

  body，td，th，.metadata a：link，.metadata a：visited，.navigation a：link，.navigation {
 / ** css code ... ** / 
} 
  

b $ b

所有这一切都可以通过引用正文的一段代码来完成。所以，减少你有重复的数量。

• dd出现30次


> / ul>



此外，只使用您需要的将大大减少大小。




I have a CSS file which styles the entire page, and it's getting Gzipped and it's minified, but it's still 200kb. Is there anything else I can do?

解决方案

I took at look at your profile and found www.charliecarver.me, took a look at that and found a css file. If this is your website and the css file you are talking about, you repeat a lot of statements. For example, line 1 to 13 of your css file looks like this:

body {
/** css code... **/
}

Line 15 to 17 looks like this:

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,input,textarea,p,blockquote,th,td {
/** css code... **/
}

Line 432 to 434:

html>body #content {
/** css code... **/
}

Line 826 to 828:

body,td,th,.metadata a:link,.metadata a:visited,.navigation a:link,.navigation {
/** css code... **/
}

All that could be done with one block of code referencing the body. So, Reduce the amount of repeats you have. Just to give you an idea of what's repeating:

The elements:

• "div" appears 35 times
• "dt" appears 50 times
• "dd" appears 30 times
• "ol" appears 49 times
• "li" appears 6 times
• "yui" appears 315 times

Also, using only what you need will greatly reduce the size.

这篇关于如何使css更小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！