CKStyle —— 一套同时运行在“浏览器”和“命令行”的CSS检查、修复、压缩工具集。

  • mydemo.css
  • animate.css
  • normalize.css
  • bootstrap.css

check

321321

format

fix

compress

CKstyle vs YUICompressor 查看DIFF

CKstyle vs clean-css 查看DIFF

第一步:下载并安装 Nodejs

第二步:安装 CKStyle

[sudo] npm install -g ckstyle

第三步:新建一个CSS文件,例如test.css,内容如下:

/* 示例 */
.test {-webkit-transition: 1s; -moz-transition: 1s; _width:10px; *color:#ffffff; padding:0; 
padding-top: 20px }

第四步:试试~

ckstyle format test.css ======>
/* 示例 */
.test {
    -webkit-transition: 1s;
    -moz-transition: 1s;
    _width: 10px;
    *color: #ffffff;
    padding: 0;
    padding-top: 20px;
}

ckstyle fix test.css ======>
/* 示例 */
.test {
    _width: 10px;
    padding: 20px 0 0;
    *color: #FFF;
    -webkit-transition: 1s;
       -moz-transition: 1s;
}

ckstyle compress test.css ======>
.test{_width:10px;padding:20px 0 0;*color:#FFF;-webkit-transition:1s;-moz-transition:1s}

ckstyle compress --browsers="ie6,ie7,ie,chrome,firefox,safari,opera" test.css ======>
firefox : .test{padding:20px 0 0;-moz-transition:1s}
chrome  : .test{padding:20px 0 0;-webkit-transition:1s}
ie7     : .test{padding:20px 0 0;*color:#FFF}
ie6     : .test{_width:10px;padding:20px 0 0;*color:#FFF}
opera   : .test{padding:20px 0 0}
safari  : .test{padding:20px 0 0;-webkit-transition:1s}
ie      : .test{_width:10px;padding:20px 0 0;*color:#FFF}

第五步:serve

安装ckstyle-serve 插件([sudo] npm install -g ckstyle-serve),运行ckstyle serve ,在 4567 端口启动了ck服务,开始玩转 CKService 吧~

什么是CKService

有一个东西,能让你一次点击,检查任何网站的CSS。检查结果内容包括:

  1. 该网站的所有CSS的进一步优化的空间(包括字符数、百分比等)
  2. 一万次 PV 能够节省多少MB 流量
  3. 在页面上 实时替换和恢复 压缩后的CSS文件,查看压缩后对页面的影响
  4. 实时查看压缩前后的 代码Diff

CKService让您 0成本 的完成CSS代码的预压缩,而对线上实际代码不产生任何影响,轻松无压力的试用吧!

CKService的使用:Bookmarklet

准备工作:

  1. 安装:[sudo] npm install -g ckstyle
  2. 安装插件:[sudo] npm install -g ckstyle-serve
  3. 启动:ckstyle serve

开始玩!

Bookmarklet链接为:CKService

  1. 直接点击,即可查看本网站的CKService检查结果
  2. 将此链接拖动到收藏夹,即可生成CKService书签,对任何网站进行CKService检查

部分网站的CKService使用结果

人人网

ckservice 人人

淘宝网

ckservice 淘宝

一淘网

ckservice 一淘

优酷网

ckservice 优酷

百度贴吧

ckservice 百度贴吧

更高的压缩率

目前,CKStyle的压缩率已经远远超过了YUICompressor

目前,CKStyle基本与clean-css压缩效果持平,甚至局部超越。

请通过在线编辑器进行测试,如果有不符合以上期望的结果,请在 这里 提bug,多谢。

更完整的工具体系

前端,再也不需要安装各自独立的检查(CSSLint)、美化(CSSBeautifier/CSSComb)、修复(暂无)、压缩(YUICompressor/cssmin/clean-css)工具。

CKStyle,一个工具,即可包揽以上所有事情。

  • 检查:检查代码中可能存在的风格、取值等问题。
  • 美化:简略的格式化代码。
  • 修复:尽可能多的修复代码问题,并最终格式化。
  • 压缩:在修复的基础上,压缩代码。
  • 分浏览器压缩:根据不同的浏览器,压缩出不同的CSS,再也不用为兼容不同浏览器,编辑不同CSS文件了。

CSS的工具体系,从解析器开始,应该是一脉相承的,不应该互相隔离。

更强的扩展性

CKStyle的所有功能,都是基于插件的,规则的处理,是插件,命令行工具,还是插件。例如:

规则的插件,就像是流水线上的工人一样,每一个插件,负责一个职责,整体协作,完成一项产品。例如:

  • FEDCombineSameRuleSets,它的 check用于检查是不是有值相同的RuleSet,它的 fix 用于自动修复此问题
  • FEDNoUnitAfterZero,它的 check用于检查0后面有没有可省略的单位,它的 fix 用于自动删除可省略的单位

每一个工人,都是可以 随时调换 的,每一个插件,都可以 热插拔

更自然的使用方式

CKService,前所未有的CSS在线分析与替换工具

按照简单的2个操作步骤,就能一键分析任何网页的CSS。如果你问我:

  • 你的工具压缩我的CSS,有什么帮助
  • 你压缩完我的CSS以后,会不会有影响现有功能
  • 你压缩后的CSS,和我之前的CSS,代码上到底有什么区别

有了CKService,一次点击,就能告诉你答案。

更多运行环境的支持

  • Nodejs:require('ckstyle')
  • 命令行工具:ckstyle compress in.css -o out.css
  • 浏览器环境:seajs.use('ckstyle')

运行环境,不是问题,立即试用,就看这里

功能正确性

基于Mocha的完备的单元测试,保驾护航

作为一个工具,单元测试必不可少,CKStyle基于Mocha,设计了一套适合自己特色的 测试用例组织方式。包括:

  • CSS版单元测试:用纯CSS,编写检查功能的单元测试。
  • Nodejs版单元测试:用Nodejs,编写更为复杂多变的单元测试。

对开发者,更开放,更自由

开放的架构设计,功能即插件,灵活扩展,欢迎共建。

CKStyle设计之初,就考虑到了工作的艰难性和长期性,任何地方,都争取设计成足够灵活可扩展的。

  • CKStyle的子命令 (例如 ckstyle format/fix/check/compress),可热插拔
  • CKStyle的规则 (例如 FEDCanNotSetFontFamily),可热插拔

开放的架构,开源的代码,欢迎大家一起贡献。

使用

参与

文章

CKstyle官网诞生

关于

CKStyle是纯JS实现的CSS工具集。

目前,CKStyle在压缩率和压缩后代码的性能上,已经超过了YUICompressor

4年前,jQuery团队用UglifyJS 取代 了Google Closure Compiler

而现在,CSS压缩工具已经严重落后于专业前端开发者的实际要求

为了共建更好的CSS压缩工具,我们需要你,请 加入我们

历史