众所周知，css是非常棒的，它使网站看起来很漂亮，可以为网站添加动画，并让呈现和内容分离。去了解css的一切是非常难做到的，它只会变得更加困难,因为我们想让我们的代码跨浏览器兼容。
这里介绍了很多第三方工具，从简化工作流程到生成真正的css，这些工具都提供了我们需要的代码，并且比我们自己写出的代码运行的更快。
pure pure并不是一个框架。相反，它只是集成一些已经应用到模块中的css代码，方便我们使用。只需要为你的项目抓取你想要的那部分css代码。当然，所有组件都是可用的。pure中包含了网格系统、按钮、表格、表单和菜单，这些都是建立在normalize.css上的。
magic animations css3 magic animations css3集成了 css3 animations，可以被应用在任何元素上，包含元素替换、滑出、变形和消褪等效果
jeet grid system jeet和semantic.gs有点类似，是以sass为基础的网格系统。你可以在css中定义列（有时定义行），而不是为标记元素添加class。jeet使响应式布局更加容易，并进一步分离了内容和呈现。
10 pure css flat mobile devices 一个叫oleg的人用纯css重绘并模拟了10种不同的移动设备（包括iphone 6, ipad mini, nexus 5, and lumia 920）
codyhouse 可以给你的网站添加不相关的、独立组件的一个库。codyhouse是用html、css和javascript建立的，你可以选择各种各样的导航、视差效果、分页、模态窗口、页面布局等等，每一个组件独有让你快速使用的教程。
ratchet 如果你使用html、css和javascript是移动app，ratchet应该是一个不错的框架。每一个ui组件都是针对移动设备定制的，并且它有很多你在传统的html/css框架中看不到的功能。组件的默认效果都是非常棒的。
animo.js animo基于jquery，能帮你更好的触发css动画。你可以叠加动画,或者第一次完成后触发第二个动画,并能同时利用css动画提供的硬件加速优点。
adobe extract 将一个photoshop图层样式文件转换为css是一件很痛苦的事。幸运的是,adobe做了一个工具(运行在浏览器中),允许你选择某个图层,将其属性转换为css代码。您也可以选择任何在线网站在psd文件中使用的文本。
sculpt sculpt基于sass，是一个很好的框架。与其他已经发布的框架相比，sculpt支持被遗弃的低版本浏览器。如果你用sass开发移动优先的网站，并想要网站正常运行在低版本的ie上，可以考虑sculpt。
css3 generator 一个简单通用的css3属性生成器。它不是很新，但是当你忘了一些精确的语法时，它是非常有用的。
bourbon neat sass的最爱了，bourbon neat是一个简单的语义网格系统，可以单独使用，但它的设计是用 bourbon mixin库。
enjoy css enjoy css也是一个css3生成器，但有趣的是，它不仅仅是生成css3-related代码,你还可以选择你想要应用的元素:一个div,文本输入,一个按钮,等等，用一种简单可视的方式得到你想要的确切效果。
keyframer 从这里开始创建你的keyframe-based css animations。只需要去这个网站学习一些教程。
gumby gumby是一个html/css框架，为那些喜欢在ruby环境中工作的人设计的。你可以单独下载它,当然,但也打包为一个ruby gem,ruby gem是由那些这种技术的人创建的。
csshake 这有更多的css动画,重点是做出一些改变（知道我说什么吗?），但是，他们在炫耀他们的在线赚钱艺术（我不能容忍！）。
bounce.js bounce.js结合了可视化（用于设计css3 动画）和js库（用于实现），对于那些喜欢视觉设计的人来说，它的使用是非常简单的。
gridlover 需要一个简单、可视化的方式去调整字体大小吗？gridlover提供了一种简单的方式来预览排版、设置匀称的垂直和抓取css。你可以抓取css中字体的像素值、ems, or rems, 这些值会被格式成普通的css, sass, less或其他代码风格。
extractcss 想要快速设置css文件？一种方式是首先写html，然后设置id、class等，将html代码粘贴到extractcss,web app会列出所有的选择器，最后将它们放入css文件就行就可以了。
kite kite是一个用于布局的css库，其设计用到了css flex模块，但并不是完全使用flex。kite兼容ie8+。
pesticide 需要确切地找出你的布局发生了什么?添加pesticidecss文件。它将给页面上的每个元素添加边框,当元素作为子层次结构时，会巧妙地改变边框颜色。简单,但让人印象深刻。
pleeease 疲惫的寻找不同的工具来对css进行预处理,添加特定的前缀,包括ie过滤器?不介意使用命令行吗?这是给你的。兼容sass,less和stylus
css colours css友好的颜色名称列表，包含了十六进制和rgba格式。
css vocabulary 一个小应用程序,提供了一个方便的css相关的术语列表。选择其中一个,它将通过高亮一些示例代码来说明这个术语。
tridiv 用纯css建立复杂的三维模型。
buttons 用sass和compass建立css按钮库
css menu maker css menu maker能帮助你建立简单、响应式的导航
one% css grid one% css grid是一个12列的流布局网格系统，它是为构建更快、成本更低的响应式布局而设计的。
simptip simptip是由sass制作的css提示框工具。不仅可以设置提示框的方向（上、右、下、左），还可以设置不同的颜色，例如成功色、信息色、警告色和危险色。
myth myth是一个css预处理器，这样你只需要写css，不用去担心低版本浏览器的支持，甚至低版本规范的改进。
hover css 集成了css悬浮效果的代码，可被用在链接、按钮、logos、svg和特色图片等等。
css animation cheat sheet css animation cheat sheet是一组预设、即插即用的动画css库.你只需要将样式表导入到你的网站，然后给你想要添加动画的元素添加类就行。
spinkit spinkit包含了一些简单但非常棒的css动画加载效果
typebase.css typebase.css是一个很小的、可定制的排版样式表。它同时又less和sass版本,因此可以很容易地修改和合并到现代web项目。
spritebox 使你的css imager sprites变成可拖放的编辑器，并让它为你写代码。
css ratiocinator css ratiocinator是一个命令行工具，通过检查实际的呈现效果，会清除掉没用的css代码。它非常适合应用在一些css文件已经超出控制的大项目。
css beautifier 美化css，如果你已经得到了一个缩小的文件但不能找到原始(或你只是有点混乱的代码)文件时,代码的美化可以通过适当的格式化和缩进修复。
csscomb 在使用css beautifier让你的代码变得可读之后，你可以使用csscomb运行代码，确保所有的属性都按照字母表有规则的排序。记住，不是选择器，而是属性，例如宽度总是在字体声明之后等等
anima 一个动画库,为了扩展css动画的功能而设计的，并且能同时为100个元素设置动画。
recess recess是一个剥绒机程序,也可以作为一个编译器运行，目的是确保你的css符合一组规则并保持精简。每个规则可以单独禁以满足你的编码风格。
bonus: a to z css bonus: a to z css不是一个工具，但是对于初学者来说是一个很好的资源。在a to z，guy routledge为每一个css基本规则，如盒子模型及最常用的css属性，提供了坚实的课程。
译文出处：http://www.ido321.com/1545.html
英文原文：40 tools for writing better css