css 工程化

• 组织
• 优化
• 构建
• 维护

PostCSS

css通过postcss解析转换（可以进行模块化、加前缀、处理兼容性问题等等）为css。

• PostCSS本身只有解析能力
• 各种神奇的特性全靠插件
• 目前至少有200多个插件
• import 模块合并
• autoprefixier自动加前缀
• cssnano压缩代码
• cssnext使用css新特性
• precss变量、mixin、循环等

简单的使用

使用，首先进行安装：npm install postcss-cli --save安装到自己的项目中，然后进行一个简单的输出测试：

// 在终端输入下面的命令，他会打印出src目录下面的postcssTest文件里面的内容
./node_modules/.bin/postcss src/postcssTest.css

我们可以对该文件进行解析输出加一个命令 -o：

// 在终端输入下面的命令，输出到build文件夹中的postcssTest
./node_modules/.bin/postcss src/postcssTest.css -o build/postcssTest.css

添加前缀

如果需要添加前缀，需要配置插件，新建一个postcss.config.js文件，添加配置如下：

// 需要在项目进行安装autoprefixer插件：npm install autoprefixer --save
const autoprefixer = require('autoprefixer')
module.exports = {
  plugins: [
    // 自动添加前缀
    autoprefixer()
  ]
}
// 在package.json中添加配置
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]

对import引入的代码进行合并请求

如果我们在写css的时候使用import，这样会发送一次请求去获取，我们可以通过 postcss-import去合并代码，需要在postcss.config.js进行添加配置： 首先需要安装postcss-import插件：npm install postcss-import

const atImport = require('postcss-import')
module.exports = {
  plugins: [
    atImport
  ]
}

cssnano 压缩代码

使用cssnano插件，需要配置在postcss.config.js中插件的最后，因为前面的配置进行对css代码的处理，最后进行压缩使用。 使用前还是需要进行安装该插件：npm install cssnano 然后进行配置postcss.config.js：

const cssnano =  require('cssnano')
module.exports = {
  plugins: [
    cssnano
  ]
}

cssnext

这个插件是css最新特性的支持并使用:比如定义变量，以及跟css预处理器一样定义代码片段；使用时还是需要进行安装该插件： npm install postcss-cssnext,配置如下：

const cssnext = require('postcss-cssnext')
module.exports = {
  plugins: [
    cssnext
  ]
}

precss

基本跟预编译器很类似：

• 变量
• 条件（if）
• 循环
• Mixin Extend
• import
• 属性值引用

使用时候还是需要进行安装插件：npm install precss,配置：

const precss  = require('precss')
module.exports = {
  plugins: [
    precss
  ]
}

处理前的css：

$blue: red;
$column: 200px;

.menu {
  width: calc(4 * $column);
}

.menu_link {
  background: $blue;
  width: $column;
}
.notice-clear {
  @if 3 < 5 {
    background: green;

  }
  @else {
    background: blue;
  }
}

@for $i from 1 to 3 {
  .b-$i {
    width: $(i)px;
  }
}

处理后的结果：

.menu {
  width: -webkit-calc(4 * 200px);
  width: -moz-calc(4 * 200px);
  width: calc(4 * 200px);
}

.menu_link {
  background: red;
  width: 200px;
}
.notice-clear {
    background: green
}

.b-1 {
    width: 1px;
  }

.b-2 {
    width: 2px;
  }

.b-3 {
    width: 3px;
  }

PostCSS支持的构建工具

• cli命令行工具
• webpack postcss-loader
• gulp gulp-postcss
• grunt grunt-postcss
• rollup rollup-postcss
• ....

CSS 面试真题

如何解决css模块化问题

• Less Sass等css预处理器
• postcss插件（postcss-import / precss等）
• webpack处理css（css-loader + style-loader）

postcss可以做什么

• 取决于插件可以做什么
• autoprefixer cssnext precss等兼容性处理
• import 模块合并
• css语法检查 兼容性检查
• 压缩文件

css modules是做什么的，如何使用

• 解决类名冲突的问题
• 使用postcss或者webpack等构件工具进行编译
• 在html模板中使用编译过程产生的类名

为什么使用JS来引用、加载CSS

• JS作为入口，管理资源有天然优势
• 将组件的结构、样式、行为封装到一起，增强内聚
• 可以做更多处理（webpack）

阅读量：

评 论：