2014 年 20 款最好的 CSS 工具

浏览数：52 / 时间：2015年06月09日

说到 WEB 设计，不得不介绍介绍 CSS 工具，CSS 工具在这里面扮演很重要的角色，可以简化无数开发者和设计师的工作，写出更好的 CSS 代码。

而网上有非常多的 CSS 工具，帮助设计师和开发者高效的工作和进行更多创新的创作，设计师和 web 开发者也把越来越多的 CSS 工具收入为自身的开发和设计利器。

在这篇文章中，我们罗列了 2014 年最好的 20 款 CSS 工具，希望能帮助大家简化自己的开发工作，创作出更多更好的创新作品。Enjoy！

1. Enjoy CSS

EnjoyCSS 能创建活跃，超棒的实例，EnjoyCSS 生成器大大简化了自定义类声明。EnjoyCSS 是众多 CSS 工具中非常有用的，也是开发者和设计师工具箱必备的利器之一。它能加快工作流，简单易用，不需要编码就能整合丰富的图形样式到简单的 UI。

2. Keyframer

Keyframer 是非常值得信赖的，简单易用的 CSS3 动画创建工具。用户只需要点击相应的按钮就可以添加动画效果，插入相应的动画 CSS 代码。点击 X 按钮就可以删除掉当前的效果，测试动画效果。

3. Wow.js

Wow.js 允许用户滚动页面的时候展示 CSS 动画。默认的，用户可以使用它来出发 animate.css 动画。但是用户也可以非常容易修改设置喜欢的动画库。Wow.js 比其他 JavaScript 视差插件小，类似 Scrollorama（这个非常华丽，但是也更繁杂）。Wow.js 非常容易安装和使用。如果你使用 Wow.js，你可以非常快的启动，执行代码。

4. Jeet

Jeet 是市场上最先进的网格系统，可以把它当作 Semantic.gs 的精神继承者。使用这些强大的预处理器，我们可以通过分数（浮点数）作为限制来生成基于百分比的宽度和网格槽，可以在维护无限循环槽的时候使用这个功能。 Jeet 允许用户像人类描述页面网格一样表达页面网格。使用 Jeet，不会有多余的嵌套元素，没有十二列的规则，不需要多少代码就能更快的绑定 Jeet，更灵活。

5. Gridlover

Gridlover 提供字体大小，行高和页面空白的可调节 CSS。默认 CSS 输出是针对 body，p 和 h1-h4 标题，但是用户可以通过编辑 CSS 来申请调节任意元素的可调节值。只需要简单的拖拽顶部工具栏左边和右边的数值来调节数值，Gridlover 的元素总是保持完美像素基准网格对齐。Gridlover 字体大小是通过调整标题水平的比例因子来计算的。行高会自动适应字体的大小。

6. Magic CSS3 Animation

Magic CSS3 Animations 是 CSS3 动画的包，伴有特殊的效果，用户可以自由的在 web 项目中使用。Magic CSS3 Animations 结构非常简单，包括 CSS 样式：magic.css 或者是 mynified 版本：magic.min.css。

7. Refills

Refills 中，Bourbon 提供 Sass 多态和消除特定前缀，为了更快的 CSS 编码。Neat 提供一个轻量级的网格框架，Bitters 提供 Bourbon 或者 Neat 项目的架构和基础变量。Refills 是预先包装好的模式和组件，在 Bourbon，Bitters 和 Neat 的基础上建立的。