CSS检查工具-CKStyle

HTML5学堂:CSS代码存在压缩工具、检查工具以及重排属性的工具。今天推荐给大家CKStyle这个工具,顺便也来看看其他的一些工具。

各类CSS检查工具

首先很想说,自己并不常用CSS检查工具,毕竟平日的代码编写是按照规范执行的,自己的习惯是在CSS书写完毕后,使用工具进行压缩一下就收尾了。那么为什么还要写这篇文章呢?主要是自己8班孩子前几日项目,又有人问起,那就整理总结一下,给大家分享分享吧。

CSS代码存在压缩工具、检查工具以及重排属性的工具。这周晚上,把前端开发行业内,曾经或现在比较流行的几个CSS工具,都尝试了一下,先来看看有哪些吧。

Helium:用于检查网站中未使用的CSS。

YUICompressor:基于JAVA的CSS代码压缩工具。

CSSLint:基于JavaScript的CSS代码检查工具。

CSSComb:按照属性编写顺序的规则处理CSS代码的重排工具。

CSSCheckStyle:出自“人人网”团队。CKStyle的最初版本,能够进行压缩、检查和重排。

为何要选用CKStyle

在本文当中,之所以讲解的是CKStyle,主要原因是在经过几天测试和综合对比,再阅读各个工具的API、相关资料之后,感觉还是CKStyle这个工具在使用上会更快捷方便一些。(虽然CKStyle已经一年半没有迭代更新)

下面我们先介绍具体的CKStyle用法,之后再解释为何其他的几个被否定。

如何使用CKStyle

CKStyle有两种用法,一种是在线直接使用,相对会比较方便,第二种是配置node.js之后,再通过运行命令进行CSS代码的压缩。

在线使用CKStyle

具体页面和功能看下图:

个人比较推荐这一种,之所以推荐在线,主要是源于第二种的不方便,首先需要配置node.js(对于不了解node的人有些硬伤),之后还需要配置ckstyle,虽然有相关的文档,但是文档明显不完整(2014年后没有更新)。对于第二种方法,这两天会出一篇教程给大家。(这篇文章内容略长,因此就不放在这里来说ckstyle的配置了)

CKStyle的历史

CKStyle出自人人网团队,2012年12月07日,CKStyle发布了Python版本。名称为CSSCheckStyle。

2014年09月15日,CKStyle推出了JS版,兼容NodeJS命令行。

CKStyle目前在GitHub上最后的更新时间是2014年09月30日(应该说是已经停止迭代很久了)

为何不太钟情其他的几个CSS工具

Helium

Helium是在一个网站多个页面中发现未使用的CSS的工具。能够接受一组网站不同部分的url,然后加载并解析每个页面,生成一个所有页面样式表的列表。经过检查之后,详细记录了每个样式表中那些在所给页面中没有被用到的选择器。

不太舒服的地方在于,Helium只能够检测没有匹配到的选择器,而不能进行排序或进行测试是否有针对元素重复设置的无意义样式。

我们想说的:这个工具可能更适合进行代码的基本审查和检测(如审核面试者的代码等),但是审查能力一般,也并不适合做前端开发的“攻城狮”使用。如果你想尝试Helium的话,请注意:1 需要在服务器环境运行;2 测试的页面中不要出现JavaScript错误。

YUICompressor

1 代码压缩率有限,并不能够实现CSS高级压缩。高级压缩:如一个元素用拆分方法设置了左内边距和上内边距,压缩为使用padding合写的方法。

2 功能比较单一,仅仅能够压缩。

CSSLint

1 没有检查风格,也就是说,并没有处理缩进等

2 对于检查出的CSS问题需要手动修复,并不能够自动优化(如典型的0px大小简写为0以及颜色#fff转换为#FFF)

CSSComb

功能相对来说比较单一,只能够调整代码顺序。

还有一些想说的

最后,还是想再强调一遍,借助工具之后,人会变得越来越懒,不要让工具成为让你变懒的东西,而应该让工具作为优化你成果的东西,自己本身应当有一个良好的代码习惯~

本分享文章从收集资料、翻阅文档、书写测试demo、文章内容至排版发布,共耗时:8小时。编写人:HTML5学堂 - 利利

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2016-01-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

Demoo使用秘籍,比好用更好用 - 腾讯ISUX

1184
来自专栏非著名程序员

两款iOS和Android都通用的开源自动化测试工具

自动化测试在产品测试上有着非常重要的作用。实现测试自动化有多种积极的方式,包括最大限度地减少测试执行时间;在关键的发布阶段,用更少的时间确保更大的覆盖范围;在产...

2108
来自专栏小巫技术博客

高效Mac(三)面向程序员的交互设计神器:Framer Studio

623
来自专栏一个番茄说

Functional Testing in iOS

下面的Test Pyramid摘自Martin Fowler的 文章,越高层次产生的用户价值会更高且更慢,越低层次的产生的价值更低且更快,你所写的任何一行单元测...

1192
来自专栏守候书阁

移动web开发问题和优化小结

到目前为止,互联网行业里,手机越来越智能化,移动端占有的比例越来越高,尤其实在电商,新闻,广告,游戏领域。用户要求越来越高,网站功能越来越好,效果越来越炫酷,这...

992
来自专栏我和未来有约会

Silverlight SEO优化

Silverlight SEO优化 SEO优化 2008年10月份,微软发布了针对Silverlight应用程序进行搜索引擎优化的指导文档,该文档描述了对Si...

1755
来自专栏BestSDK

用户不填表?那是因为你没用好这7个设计准则

无线端用户使用移动应用程序或网站都有一个特定的目标。通常情况下,站在用户和他的目标之间都会有一个交互形式 – 。实际情况中,表单被认为是用户使用链路中达到目标的...

2506
来自专栏互联网杂技

抛弃jQuery,拥抱原生JavaScript

Why not jQuery 1. 模式变革 jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/...

3288
来自专栏小白安全

ClickJacking攻击-获取管理员权限

前言 有一段时间没做测试了,偶尔的时候也会去挖挖洞。本文章要写的东西是我利用ClickJacking拿下管理员权限的测试过程。但在说明过程之前,先带大...

28211
来自专栏崔庆才的专栏

腾讯云主机上测试BootStrap4编译FlexBox

最近在开发一个移动端适配的网站,使用了materi-ui框架,基于React。使用materi-ui时,已经内置了许多样式,但是bootstrap的一些多余样式...

2040

扫码关注云+社区