想问问有木有前端整理 css 的工具

比如这么个场景
我有几个页面然后有些公用的CSS组件所以我把全部的css都写到一个base.css里面了
结果就是这个css文件里面的很多样式并不是所有的页面都使用到的很多是某个页面没有必要的样式嘛强迫症受不了这个....

所以想问有没有这么的一个工具, 能够分析出某个页面的css 然后生成该页面对应的css文件, 这样就比较好

PS: 用英文表达来Google 臣妾做不到啊哭...

akfish

2014-12-28 00:23:10 +08:00

用css的预编译器，如less，sass

yakczh

2014-12-28 00:39:37 +08:00

www.brothercake.com/dustmeselectors

bigcoon

2014-12-28 01:10:17 +08:00

我觉得没有必要浏览器会缓存文件也只有第一次比较慢

pubby

2014-12-28 01:13:49 +08:00

我们是让web后端自动处理的

<head>部分先引入基础全局的样式定义 global.css

页面上的每个ui模块xxx.html中有针对模块自己的<style> ...</style> 定义

最后整个页面输出的时候自动整合所有<style> 并放入<head>中

也支持将这部分<style>外置到单独的css文件中，比如 http://static.xxx.com/css-cache/<md5(<style>内容)>.css （其实css文件是不存在的，放在一个缓存服务器里面，为了照顾那些看搜索引擎快照页的人，缓存时间比较长）

pubby

2014-12-28 01:15:40 +08:00

主要不是剔除无用css定义，只是方便写模块的人专注于一个独立的 xxx.html 即可

Septembers

2014-12-28 01:36:51 +08:00

Chrome有个Element inspector里有个Audits功能
能分析出有哪些可优化的地方来

liv1l

2014-12-28 10:39:27 +08:00

CSS remove and combine 试一下chrome 的这个plugin

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/157221

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.