预处理器

预处理器提供更有效的编写 CSS 样式表的工具，如 LESS、SCSS 以 SCSS 为例，需要理解常用特性如：变量、混合、继承、函数、循环、分支、导入组件等

SCSS

• 初始scss
• scss进阶

LESS

使用较少

后处理器

后处理器主要为进一步处理样式表，使其更符合规范，

PostCSS

常见的功能有 autoprefixer、px2rem 等

官网

避免选择器冲突

维护CSS有几个比较困难的问题：

• 默认全局命名空间，样式冲突十分常见
• 混乱的样式重用或选择器的滥用，导致改动牵一发而动全身
• 修改样式表的同时可能会改动页面结构，而且往往不只一个页面

最后决定使用BEM来管理样式名称。参考

• CSS代码格式
• 关于CSS的思考
• 使用BEM声明CSS样式名

BEM

参考之前的整理

• 使用 BEM 声明 CSS 样式名

其核心思想是理解块、元素和修饰符的关系

CSS Scoped

Vue提供了一个PostCSS插件@vue/component-compiler-utils，实现了css作用域的功能

CSS Module

github 地址

作用 modular and reusable CSS!

• No more conflicts.
• Explicit dependencies.
• No global scope.

使用方法 编写样式表

/* style.css */
.className {
    color: green;
}

在引入一个 css 模块时，会将其导出一个 JS 对象，并将局部类名映射为全局类名。

import styles from "/style.css";
// import { className } from "/style.css";

element.innerHTML = '<div class="' + styles.className + '">';