编写更好的CSS必备的40个工具

众所周知，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