50个超级有用的CSS开发工具
SmashingMagazine今天给我们带来了一篇非常全面的汇总，介绍了50个超级有用的CSS开发工具，其中相当多的小工具都是让我觉得非常有帮助的，甚至有了做几个中文版的念头，虽然C2C(Copy to China)的习惯并不是那么好，但是有的时候真的觉得在每日奔波，与CPI抗争的局势下，要有点创新的主意真的很难。
闲言少叙，让我们开始惊艳之旅，要先说明一下，”Firebug” 和 “WebDeveloper” 两位同学将缺席本次颁奖活动，因为他们实在太出名了。
CSS and Typography
Hyphenator Hyphenator.js解决了西方语言断词的问题，给行尾换行的单词加上了“-”连字符。相信很多程序员都被QA报过这样的defect，新建一条数据，有个column是afsafdsafsadfsafsafafsafasfsa，然后说页面被撑破。总是被我无情的Won’t Fix。实在不行了word-break一把。中文不会遇到这个问题。有兴趣的你去看一下。
CSS Type Set 貌似被墙了，有兴趣的翻出去看看
Typechart 快速浏览，比较各种不同的文字排版样式，（如果可以通过上传css文件来快速预览，倒也是个不错的idea）
CSS-Typoset Matrix and code generator
快速生成最常用的一些Tag的字体大小设定，由Px转换到Em尺寸上，可以比较完美的做到文字缩放。
body { font: normal 0,8764em/1.5em Arial,Verdana,sans-serif; }
html>body { font-size: 14px; }
p { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h1 { margin: 1.05em 0; font-size: 1.4286em; line-height: 1.05em; }
h2 { margin: 1.1667em 0; font-size: 1.2857em; line-height: 1.1667em; }
h3 { margin: 1.3125em 0; font-size: 1.1429em; line-height: 1.3125em; }
h4 { margin: 1.5em 0; font-size: 1em; line-height: 1.5em; }
h5 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
h6 { margin: 1.75em 0; font-size: 0.8571em; line-height: 1.75em; }
类似这样
Em Calculator 楼上那个的图文加强版
真的是很好很强大，不单是觉得挺有用的，整个App的UI设计也非常让人满意，值得学习。
Facelift Image Replacement (FLIR) 快速创建图片替换的代码，FLIR技术，读作Fleer。
Vertical rhythm calculator 好多计算器，不得不说，欧美的设计师们更加注重这些细节。
typeface.js 总是感叹网页上文字能够使用的字体很有限，羡慕在PS或者Flash中可以随意挑选。typeface.js能帮你实现内嵌字体技术。
看到上面也许你会兴奋，但是对于老外的52个字母来说，这是很梦幻的效果，对于中文来说，没戏了，把几千个汉字打包到js中实在太可怕了，无论是可用性还是性能都不会让人接受。不过适当的将一些常用字做进去，可能会有不错的效果，好像是perl的build脚本，上次打包过一次，败了。
CSS Online Tools
PSD2CSS Online 在线的PSD文件到CSS的服务，没用过，也不想用，都有这个了，民工吃什么。
Conditional-CSS 根据你上传的CSS文件，检查其中一些css hack，用条件注释来保证浏览器兼容性。
说实话这是维护代码的噩梦开端。
MoreCSS CSS的js扩展，利用js来实现很多CSS中没有的特性，类似于那个著名的IE7.js，不过这种工具也算是双刃剑，怎么用看自己了。
px to em 速查表，我看到em都汗了。。
CSS Frame Generator 请看我以前的介绍文章 http://www.1x3x.net/blog/web-design/2008/04/css-frame-generator.html
CSS Redundancy Checker 检查你的CSS文件中那些是冗余的代码
DSL编码风格的css扩展，又一个类似于MoreCSS的js类库，能让你用非常时髦的DSL风格去编写样式文件，我觉得更酷的是去看看这个js本身。
WordOff 被墙
Postable 帮你快速的escape一下内容
Table HTML生成器，个人感觉没什么用，而且生成的TAG还是大写的，不喜欢。
这是一个挺有意思的东西，太晚了，没有细看，说明是说可以在线更新CSS文件，但是依赖于IISserver，本身也是用.NET写的，有待进一步更新。
Deploy 这是一个开源的WebApp，能够一键帮你生成包含项目名称，DocType，各种JS类库的热部署方案。真的很是诱人的一个服务。不过好像也被墙了，不过大家不用担心，元旦前，我来提供一个墙内开花版。
CSS Evolve 通过对一个网站的各种属性重新设置，来看看各种不同的效果。不支持中文，效果没有说的那么大。不过这种测试方式可以借鉴。
Lorem可能只有专业的设计师才会接触到的名词，看一下wiki上的解释
Lorem ipsum是指一篇常用於排版設計領域的拉丁文文章，主要的目的為測試文章或文字在不同字型、版型下看起來的效果。
Lorem ipsum從西元15世紀開始就被廣泛地使用在西方的印刷、設計領域中，在電腦排版盛行之後，這段被傳統印刷產業使用幾百年的無意義文字又再度流行。由於這段文字以「Lorem ipsum」起頭，並且常被用於標題的測試中，所以一般稱為Lorem ipsum，簡稱為Lipsum。
SelectORacle CSS3 selector 英文 西班牙文转换
JS Bin 一个非常酷的在线JS编辑器，能够动态查看结果，调试代码，还能直接分享url供其他人查看。算是比较典型的web2.0 App了。
CSS Text Wrapper 在线小工具，能够创建很漂亮的文字围绕图形。
Writing Tests Against CSS CSS开发中，自动化Mock测试是件比较困难的事情，作者提供了一个不错的解决方案，是python的测试脚本，有兴趣的同学可以看一下。
CSS Sprite Generator 现代网站开发调优经验中，排在前面的很重要一条就是尽可能的减少页面的Request数量，（唉，我的首页连接数就挺大的，不是最理想，好像负载不大），CSS sprite技术因此变得流行，如果不明白的，看看网易邮箱的登陆页上的图片就知道了。
Sky CSS Tool 在线编写CSS样式，类似于Dreamweaver的可视化操作，不喜欢手写代码的可以试试看。
CSS Tidy Online 非常酷的CSS代码排版压缩工具，我以前也推介过。一定要加到收藏哦。
Web-Based Tools for Optimizing, Formatting and Checking CSS 一堆好用的CSS在线工具，这文章还真是环中环。
Grid Designer 2.4 随着类似于960grid这样的CSS框架的诞生，Grid排版设计愈发成为一种非常流行的设计方式，这个在线工具的创意非常好，如果能够再人性化一点就完美了。
Yahoo’s Secret Text-Sprite Generator 雅虎的神秘API，能够提供Text-Sprite生成，当然仅支持西方字符。可怜的双字节文字啊。
Replace CSS Colors – Editor 替换你的CSS文件中的颜色设置，如果你Vi玩的转一点，估计就不需要了。
The Box Office 很棒的图文围绕效果代码生成，虽然为了实现这个效果，会带来一堆挺丑漏的代码，建议用js修缮一下。
MinifyMe css js 文件压缩器，不同于之前的在线工具，这是一个flash。
cssdoc 程序员可能更熟悉这个概念， 类似于Javadoc，能够更好的帮助你汇总小结你手上那些可能已经很长的CSS文件。
CSS Menu Generator 帮你生成很多非常漂亮的CSS菜单，效果如下
sheetUp – DOM Stylesheet Library CSS的JS扩展，和之前介绍的几款各有千秋，值得一看
CSS SuperScrub 帮你做CSS代码的codereview，（偷偷说一句，我的大老板就喜欢走到你后面说，我要codereview，不改当年的码农本色啊）
DrawAble Markup Language 挺酷的在线可视化HTML编辑器，试试看，我倒是对他的制作本身有点兴趣。
Handy Kits For Designing With CSS
Regex Patterns for Single Line CSS
神器Textmate的css格式化bundle，无福使用这等神器。
21 Excellent Dreamweaver Extensions for CSS Productivity and Standards
相信还有很多朋友喜欢使用Dreamweaver的，那这21款Dreamweaver插件你不容错过。
Graph Paper 太棒了，这是真是不亚于米字簿的好东西啊，方格子现代版。
Starter Kit For Developers (PSD) 让你快速开始你的工作，是个不错的东西。
CSSHttpRequest 好吧，奇技淫巧，通过CSS请求来避开同源检测限制，慎用。
// TODO ==== 明日继续更新。
整理得真是太好了。。lz辛苦了