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

ゝ一纸荒年。 2022-08-08 05:20 228阅读 0赞

众所周知，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种不同的移动设备][10]（包括iPhone 6, iPad Mini, Nexus 5, and Lumia 920）

### CodyHouse ###

可以给你的网站添加不相关的、独立组件的[一个库][Link 1]。CodyHouse是用HTML、CSS和JavaScript建立的，你可以选择各种各样的导航、视差效果、分页、模态窗口、页面布局等等，每一个组件独有让你快速使用的教程。

### Ratchet ###

如果你使用HTML、CSS和JavaScript是移动APP，[Ratchet][]应该是一个不错的框架。每一个UI组件都是针对移动设备定制的，并且它有很多你在传统的HTML/CSS框架中看不到的功能。组件的默认效果都是非常棒的。

### Animo.JS ###

[Animo][]基于JQuery，能帮你更好的触发CSS动画。你可以叠加动画,或者第一次完成后触发第二个动画,并能同时利用CSS动画提供的硬件加速优点。

### Adobe Extract ###

将一个Photoshop图层样式文件转换为CSS是一件很痛苦的事。幸运的是,Adobe做了一个[工具][Link 2](运行在浏览器中),允许你选择某个图层,将其属性转换为CSS代码。您也可以选择任何在线网站在PSD文件中使用的文本。

### Sculpt ###

[Sculpt][]基于SASS，是一个很好的框架。与其他已经发布的框架相比，Sculpt支持被遗弃的低版本浏览器。如果你用SASS开发移动优先的网站，并想要网站正常运行在低版本的IE上，可以考虑Sculpt。

### CSS3 Generator ###

一个简单通用的[CSS3属性][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动画][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 ###

需要确切地找出你的布局发生了什么?添加[Pesticide][]CSS文件。它将给页面上的每个元素添加边框,当元素作为子层次结构时，会巧妙地改变边框颜色。简单,但让人印象深刻。

### Pleeease ###

疲惫的寻找不同的工具来对CSS进行预处理,添加特定的前缀,包括IE过滤器?不介意使用命令行吗?[这是][Link 3]给你的。兼容SASS,LESS和Stylus

### CSS Colours ###

[CSS友好的颜色][CSS 1]名称列表，包含了十六进制和rgba格式。

### CSS Vocabulary ###

一个小应用程序,提供了一个方便的[css相关][css]的术语列表。选择其中一个,它将通过高亮一些示例代码来说明这个术语。

### Tridiv ###

用纯CSS建立复杂的[三维模型][Link 4]。

### Buttons ###

用SASS和Compass建立[CSS按钮库][CSS 2]

### CSS Menu Maker ###

[CSS Menu Maker][]能帮助你建立简单、响应式的导航

### One% CSS Grid ###

[One% CSS Grid][One_ CSS Grid]是一个12列的流布局网格系统，它是为构建更快、成本更低的响应式布局而设计的。

### Simptip ###

[Simptip][]是由SASS制作的CSS提示框工具。不仅可以设置提示框的方向（上、右、下、左），还可以设置不同的颜色，例如成功色、信息色、警告色和危险色。

### Myth ###

[Myth][]是一个CSS预处理器，这样你只需要写CSS，不用去担心低版本浏览器的支持，甚至低版本规范的改进。

### Hover CSS ###

集成了[CSS悬浮效果][CSS 3]的代码，可被用在链接、按钮、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][CSS 4]，如果你已经得到了一个缩小的文件但不能找到原始(或你只是有点混乱的代码)文件时,代码的美化可以通过适当的格式化和缩进修复。

### CSScomb ###

在使用CSS Beautifier让你的代码变得可读之后，你可以使用[CSScomb][]运行代码，确保所有的属性都按照字母表有规则的排序。记住，不是选择器，而是属性，例如宽度总是在字体声明之后等等

### Anima ###

一个[动画库][Link 5],为了扩展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][http_www.ido321.com_1545.html]  
英文原文：[40 tools for writing better CSS][]

[Pure]: http://purecss.io/
[CSS3 Animations]: http://www.minimamente.com/example/magic_animations/
[Jeet]: http://jeet.gs/
[10]: http://marvelapp.github.io/devices.css/
[Link 1]: http://codyhouse.co/
[Ratchet]: http://goratchet.com/
[Animo]: http://labs.bigroomstudios.com/libraries/animo-js
[Link 2]: http://www.adobe.com/go/extract_tryitnow_en
[Sculpt]: https://www.heartinternet.uk/sculpt
[CSS3]: http://css3generator.com/
[Bourbon Neat]: http://neat.bourbon.io/
[Bourbon]: http://bourbon.io/
[Enjoy CSS]: http://enjoycss.com/
[keyframe-based CSS animations]: http://alexberg.in/keyframer/
[Gumby]: http://gumbyframework.com/
[CSS]: http://despreneur.com/20-fresh-css-tutorials-and-tools-to-try/
[Bounce.JS]: http://bouncejs.com/
[GridLover]: http://www.gridlover.net/
[ExtractCSS]: http://extractcss.com/
[Kite]: http://hiloki.github.io/kitecss/
[Pesticide]: http://pesticide.io/
[Link 3]: http://pleeease.io/
[CSS 1]: http://colours.neilorangepeel.com/category/green/
[css]: http://apps.workflower.fi/vocabs/
[Link 4]: http://tridiv.com/
[CSS 2]: http://unicorn-ui.com/buttons/builder/
[CSS Menu Maker]: http://cssmenumaker.com/
[One_ CSS Grid]: http://onepcssgrid.mattimling.com/
[Simptip]: http://arashm.net/lab/simptip/
[Myth]: http://www.myth.io/
[CSS 3]: http://ianlunn.github.io/Hover/
[CSS Animation Cheat Sheet]: http://www.justinaguilar.com/animations/scrolling.html
[Spinkit]: http://tobiasahlin.com/spinkit/
[Typebase.CSS]: http://devinhunt.github.io/typebase.css/
[CSS imager sprites]: http://www.spritebox.net/
[CSS Ratiocinator]: https://github.com/begriffs/css-ratiocinator
[CSS 4]: http://html.fwpolice.com/css/
[CSScomb]: http://csscomb.com/
[Link 5]: http://lvivski.com/anima/
[Recess]: http://twitter.github.io/recess/
[A to Z]: http://www.atozcss.com/
[http_www.ido321.com_1545.html]: http://www.ido321.com/1545.html
[40 tools for writing better CSS]: http://www.developerdrive.com/2015/03/40-tools-for-writing-better-css