前端工程搭建：CSS处理

1. PostCSS

PostCSS 是一个使用 JavaScript 编写的用于转换 CSS 样式的工具。它是一个工具平台，只提供基础能力，对CSS的处理通过插件的形式来实现。

PostCSS处理CSS的流程主要分为三个个阶段：

• 解析（Parsing）阶段：将输入的 CSS 文本解析为抽象语法树（AST）。具体来说，Tokenizer 先将 CSS 进行分词，然后 Parser 将分词后的结果转换成 AST。

• 转换（Transformation）阶段：Processor 将解析后的 AST 暴露给自定义插件，并提供大量的 API 让插件进行修改和转换，如添加浏览器前缀、支持 CSS 变量等。

• 生成（Generation）阶段：Stringifier 将经过转换后的 AST 重新转换为 CSS 文本

常用的PostCSS插件有：

• Autoprefixer：根据 Can I Use 网站的数据解析 CSS，并为其添加合适的浏览器前缀。这样可以确保样式在不同浏览器中的兼容性，减少开发者手动添加前缀的工作量。Chrome 和 Safari 浏览器的前缀是-webkit，Opera 浏览器的前缀是 -o。

• postcss-preset-env：它允许开发者直接使用 CSS 的新特性语法编写样式，然后将这些新语法转换为目标浏览器能够支持的语法。

• postcss-modules：实现 CSS 样式隔离。在大型项目中，CSS 的全局作用域可能会导致样式冲突。postcss-modules 通过将 CSS 类名进行哈希处理，使得每个模块的样式具有局部性。比如，将一个组件中的.button转换为._button_123abc，另一个组件中的.button转换为._button_def456，这样就避免了样式冲突。

• postcss-pxtorem：用于将像素（px）单位转换为相对单位（rem）。在响应式网页设计中，使用 rem 单位可以更好地实现页面在不同设备上的自适应。postcss-pxtorem 会根据根元素（通常是html元素）的字体大小，将 CSS 中的像素单位转换为 rem 单位。

2. 扩展语言

CSS 本身是一门纯粹的样式描述语言，不支持变量、条件等语法能力，因此不具备灵活的编程性，在处理复杂的布局和样式需求时可能会受到限制。比如，由于缺少变量管理，替换主题颜色的时候只能手动查找并修改每一个颜色值；由于缺少逻辑处理功能，只能借助 JavaScript 来实现逻辑，增加了开发的复杂性和代码的耦合度。

为了解决这些问题，Less、Sass、Stylus等扩展语言出现了。它们为CSS引入了部分编程语言的功能，如变量、运算、混合、函数等，让CSS变得更加灵活强大。

3. 样式隔离

样式隔离问题一直是困扰开发人员的难题。CSS 本身没有命名空间，这意味着CSS样式一旦生效就会直接作用于全局，很容易导致页面出现样式冲突。当出现样式冲突时，最直接的解决办法就是通过增加选择器权重值，或者使用!important来进行样式覆盖。然而，这样的方式并不可靠，也不利于项目的长期维护。

为了实现样式隔离，我们有以下几种解决方案：

• 使用BEM命名规范：BEM（Block-Element-Modifier）是一种基于类名的命名约定。“Block” 代表一个独立的组件块，“Element” 元素是块的组成部分，“Modifier” 用于表示块或元素的不同状态或变体，如一个选中状态的菜单项可以是.nav__item--selected。它通过约束类名的命名方式来保证选择器的唯一性。

  • 优点：CSS 选择器具有明确的层次结构，方便识别样式所属的组件以及组件内的具体部分和状态。
  • 缺点：作为一个规范，没有工程化手段进行约束，只能在一定程度上解决样式冲突问题，并不可靠。而且选择器的命名会变得很长，导致代码臃肿。

• 命名空间：在模块的类名或者选择器前添加特定的前缀来创建命名空间，然后以它为父级选择器，模块下的选择器都是它的后代选择器。

  这种方案是一种比较直观的隔离方式，但是它和BEM一样存在不完全隔离和命名管理复杂的问题。

• CSS Modules：通过构建工具（如 Webpack 等）在编译时将类名进行哈希处理。例如，在一个 React 组件中使用 CSS Modules，原本的.button类可能会被转换为._button_abc123。

  • 优点：哈希类名在全局范围内是唯一的，提供了可靠的样式隔离。在 React、Vue等框架的组件化开发中集成良好。
  • 缺点：编译后的类名带有哈希值，这给 CSS 调试带来了一定的不便。

• CSS in JS：CSS-in-JS 将 CSS 样式以 JavaScript 对象或函数的形式来编写。它在React 社区的热度是最高的。例如，在 React 中使用 styled-components 库，样式可以这样定义：

  const Button = styled.button`{ color: 'red'; }`;
  

  它在编译后会生成一个哈希值的类名。另外，还有一些库会将CSS样式对象转换为内联样式（styles），比如Radium。

  • 优点：样式完全在组件内部定义和管理，实现了很好的样式隔离。可以方便地定义动态样式
  • 缺点：可读性较差，类名带有哈希值造成一定的调试不便。动态生成CSS，有一定的运行时性能代价。

• Shadow DOM：Shadow DOM 是浏览器提供的解决方案，允许将一个独立的 DOM 树（包括 HTML、CSS 和 JavaScript）封装在一个元素内部，与主文档的 DOM 完全隔离。它以shadow root节点为根节点，内部样式和外部样式互不干扰。

  • 优点：提供了最强的样式隔离
  • 缺点：涉及 Shadow DOM 树操作，实现复杂。另外在一些旧浏览器中可能存在兼容性问题

常用的前端框架中如何实现组件的样式隔离：

• Vue：使用scoped style。此时Vue会在编译模板时为组件中的每个元素添加唯一的自定义属性，同时CSS 规则也会被添加一个对应的属性选择器。
• React：可以使用CSS Modules，也可以使用CSS-in-JS库（比如Styled-Components ）
• Angular：通过指定组件的encapsulation属性可以切换封装模式
  • 默认为ViewEncapsulation.Emulated，即模拟封装，在运行时为组件的样式添加唯一的自定义属性。
  • 当指定为ViewEncapsulation.Native，则会使用浏览器的原生 Shadow DOM 技术来实现样式封装。