CSS讲解(9) 工程化

2019-02-10 前端 CSS CSS讲解阅读量

css

工程化关注:

组织
优化
构建
维护

PostCSS

CSS –> PostCSS(解析转换) –> CSS

可以作:

模块化
加前缀
兼容性
…

PostCSS本身只有解析能力

各种神奇的特性全靠插件

目前至少有200多个插件

常用的插件：

import模块合并
autoperfixier 自动加前缀
cssnnao 压缩代码
cssnext 使用CSS新特性
precss 变量, mixin, 循环等

安装：

1	npm install postcss-cli

使用：

1	postcss input.css -o out.css

插件

postcss.config.js 引用各种插件

const cssnano = require('cssnano');
const atImport = require('postcss-import');
const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [
        atImport,
        autoprefixer({
            browsers: ['>0%']
        }),
        cssnano
    ]
};

Browserlist

cssnext

使用CSS新特性

特性:

custom properties & var()
automatic vendor prefixes
custom properties set & @apply
reduced calc()
custom media queries
media queries ranges
custom selectors
nesting
image-set() function
color() function
hwb() function
gray() function
#rrggbbaa colors
rgba function (rgb fallback)
rebeccapurple color
font-variant property
filter property (svg fallback)
initial value
rem unit (px fallback)
:any-link pseudo-class
:matches pseudo-class
:not pseudo-class (to l.3)
::pseudo syntax (: fallback)
overflow-wrap property (word-wrap fallback)
attribute case insensitive
rgb() function (functional-notation)
hsl() function (functional-notation)
system-ui font-family (font-family fallback)

CSS变量举例：

:root {
    --mainColor: red;
    --danger-theme: {
        color: white;
        background-color: red;
    };
}

a {
    color: var(--mainColor);
}

.danger {
    @apply --danger-theme;
}

postcss.config.js

const cssnext = require('postcss-cssnext');

module.exports = {
    plugins: [
        cssnext,
    ]
};

precss

PreCSS中的嵌套可以使用 & 符，把父选择器复制到子选择器中
PreCSS使用 $ 符声明变量，比如 $color: #ccc
PreCSS中用 @if 和 @else 来控制循环
PreCSS中用 @define-mixin mixin_name $arg1,$arg2{…} 语法来声明混合宏
PreCSS中用 @mixin mixin_name pass_arg1, pass_arg2; 语法来调用混合宏
PreCSS中用 @mixin-content 保留传递内容
PreCSS中使用 @define-extend extend_name{…} 来声明可扩展的代码块
PreCSS中使用 @extend extend_name 语法来调用声明的代码扩展块
PreCSS可以使用 @import 中导入CSS文件

构建工具

PostCSS 支持的构建工具：

CLI 命令行工具
webpack postcss-loader
Gulp gulp-postcss
Grunt grunt-postcss
Rollup rollup-postcss
…

gulp-postcss

gulpfile.js

webpack

JS是整个应用的核心入口
一切资源均由JS管理依赖
一切资源均由webpack打包

webpack处理CSS

js 引用 CSS, css-loader/sytle-loader, 将CSS文件转换成 JS文件

1
2
3

require(./xxx.css);

console.log('hello');

css-modules

是什么？
CSS模块化的一种解决方案（对css类名限定作用域的一种，只限定类选择器，对id、元素等选择器不管）
原理？
通过 webpack 在构建过程中，给类名起一个独一无二的名字，这个名字可以通过webpack配置
好处？
1. 避免类名重复导致样式覆盖问题；
2. JS & CSS 共享变量
3. 健壮可扩展

extract-text-plugin

该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象

从js将样式抽离出来生成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)