CSS 工程化 小结

CSS 工程化 

组成：1.组织 （代码目录）2.优化（那种实现方式更好） 3.构建（代码完成后须要通过哪些处理步骤） 4.维护

常见问题

1.如何解决 CSS 模块化问题

 1.Less Sass 等CSS 预处理器

2.PostCSS 插件 （postcss-import / precss 等）

3.webpack 处理 CSS (css-loader + style-loader)

2.PostCSS 能够作什么

1.取决于插件能够作什么

2.autoprefixer cssnext precss 等 兼容性处理

3.import 模块合并

4.CSS 语法检查 兼容性检查

5.压缩文件

3.CSS modules 是作什么的

1.解决类名冲突的问题

使用：使用 PsostCSS 或者 webpack 等构建工具进行编译；在 HTML 模板中使用编译过程产生的类名

4.为何使用 JS 来引用、加载 css

1.JS 做为入口，管理资源有自然优点

2.将组件的结构、样式、行为封装到一块儿，加强内聚

3.能够作更多处理（webpack）

知识点：

PostCSS

1.PostCSS 自己只有解析能力  2.特性所有靠插件实现

经常使用插件（学习点击这篇博客，下图为部份内容）

1.import (模块合并）

2.autoprefixier (自动加前缀）

3.cssnano (压缩代码）

4.cssnext 使用 CSS 新特性

5.precss 变量、mixin、循环等（跟预处理器很类似）

webpack  （中文文档）

核心思想：1.JS 是整个应用的核心入口 2.一切资源均由 JS 管理依赖  3.一切资源均由 webpack 打包

入门 webpack ，看这篇博客 写的很是详细

webpack 和 css

1.css-loader 将 CSS 变成 JS

2.style-loader 将 JS 样式插入 head

3.EXtractTextPlugin 将 CSS 从 JS 中提取出来

4.CSS modules 解决 CSS 命名冲突的问题

5.less-loader sass-loader 各种预处理器