css常用工具

分析设计图

要与设计师交流网站如何交互，是否有相应的设计规范（字体、颜色、字号、间距等），什么地方需要100%还原，什么地方可以灵活处理。

挑选第三方组件

• 使用人数
• 是否开源
• 文档是否齐全
• 灵活性
• 小巧够用的组件（轻量级）

压缩png图片

对于png格式的图片，tinypng通过选择性地减少图像中的颜色数量，存储数据所需的字节更少，图片的呈现效果几乎看不出区别，但在文件大小上产生了很大的差异。有的甚至可以降低70%的大小。

jpg转png

项目中，服务端通常采用linux系统，处理jpg格式的图片时往往报错，这时候往往将jpg格式的图片转成png格式，然后修改图片路径解决。
jpg转png的方法众多，我平时都是用PS转化格式的，用PS打开，点击文件->存储为，修改下想保存的格式。平时项目中也会遇到png转jpg的情况，方法同上，但有些png图片也会遇到无法完成请求，因为它不用索引颜色图像（将图像转换为RGB颜色模式再编辑），此时需要先修改下图像->模式为RGB，再用上面的方法修改。网上也有一些好用的在线格式转化工具，如png2jpg。

css雪碧图

css雪碧图生成器

css-hacks

查询不同浏览器的css-hacks写法

兼容低版本IE

html5shiv 支持低版本浏览器使用H5标签
Respond 支持低版本浏览器使用媒体查询

检查浏览器功能支持

modernizr是一个 JavaScript 库，用于检测用户浏览器的 HTML5 与 CSS3 特性，支持的话会添加相应的类，不支持会添加no-相应的类

轻量级的CSS框架

Pure.css，雅虎公司出品的一组轻量级、响应式纯css模块，适用于任何Web项目。
特别提一下使用框架的缺点，以BootStrap为例：
1、体积大而重，使用起来不方便。
2、样式单调，没有创新，适合后端的管理系统，而前端往往需要个性化定制。

预编译与后编译 PostCSS

“CSS 预编译器”——预编译器的作用是增强了 CSS 语法，让我们可以在 CSS 中使用变量、循环、嵌套等功能，主要代表是 Less、Sass、Stylus，它们本质上就是一种编译器。

后编译 PostCSS它可以被理解为一个平台，可以让一些插件在上面跑，它提供了一个解析器，可以将 CSS 解析成抽象语法树，通过 PostCSS 这个平台，我们能够开发一些插件来处理 CSS。热门插件如 Autoprefixer，它可以帮我们处理兼容问题，只需正常写 CSS，Autoprefixer 可以帮我们自动生成兼容性代码。