4

I'm trying to reduce the size of my CSS file. It is from a template which is very CSS & JS heavy. Even with CSSMin the CSS file size is 250kb.

Whilst I use alot of the CSS - I know I dont use it all. So I'm trying to work out which styles can be removed. I'm aware of Dust-Me selector - but that only takes a static look at the website. With HTML5 and CSS3 - websites are now very dynamic, and most of my CSS occurs from dynamic events, or 'responsive' events i.e. Bootstrap.

Question: Is there a tool which 'records' all my CSS use on a website for a perioid of time, so I can go and click/hover/move over each element and interact with my site. Then at the end let me know which styles were & were not used?

4

3 回答 3

1

我认为有两种工具可以帮助您。

helium是一个 javascript 工具，可以发现任何未使用的 css 规则。

csscss是一个源代码分析器，它将报告任何重复。我有偏见，因为我写 csscss 正是因为我找不到任何这样做的东西。但很多人似乎觉得它很有用。

于 2013-04-16T17:59:43.023 回答
1

CSS Usage 是 Firefox 的一个很好的扩展。它告诉页面中当前使用了哪些 css。

链接：https ://addons.mozilla.org/en-us/firefox/addon/css-usage/

于 2012-06-04T18:29:57.100 回答
0

250kb对于 CSS 文件来说真的是一个很大的数字。
模板通常在一个文件中包含所有页面所需的所有 CSS。
我会建议：

不要剪切你的 CSS 代码，它们可能在某个时间点需要。

相反，我建议将您的 CSS 文件分解为多个小文件以用于不同的页面样式，例如登录页面使用不同的 CSS、主页使用不同的 CSS 文件等。
阅读您自己的CSS代码并HTML努力找出其中的重要部分CSS 代码用于哪个 HTML 部分。

更新：
您可以尝试Removed Unused CSS - CSS optimizer。
我个人没有使用它只是希望它对你有用。

于 2012-06-04T18:30:31.473 回答