CKStyle — 一脉相承的CSS检查、美化、修复、压缩工具。

  • mydemo.css
  • animate.css
  • normalize.css
  • bootstrap.css
 
1
/**
2
 * CKStyle online editor demo
3
 * @author wangjeaf
4
 */
5
.test1 {
6
    *display: none;
7
border: 1px solid #FFFFFF;
8
            margin: 10px;
9
    _display: inline-block; margin-top: 20px;
10
}
11
 
12
.test2 {
13
    *display: none; border: 1px solid #FFF; _display: inline-block;
14
    margin: 20px 10px 10px;
15
}
16
 
 
规则 分浏览器 工具箱

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 吧~
更多使用，请上github瞅瞅吧~

什么是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压缩工具，我们需要你，请 加入我们！

历史

CKStyle © 2014 wangjeaf.

分享到： 更多