理解CSS | 青训营笔记（3）

⑥ CSS 生态相关

语言增强 : 预处理器 后处理器

工程架构: css模块化, css-in-js , Atomic Css

6.1 预处理器

6.2 后处理器- PostCSS

PostCSS是一个用JavaScript编写的工具，它可以在CSS代码被浏览器解析之前对其进行转换和处理。PostCSS可以扩展CSS语言，使其更加强大、灵活、易于维护。

PostCSS的工作机制主要由以下三个步骤组成：

1. 将CSS代码解析为一个抽象语法树（Abstract Syntax Tree，AST）。
   
2. 在这个AST中执行各种插件进行相应的转换或者处理工作。这些插件可以改变CSS规则或者生成新的CSS规则。
   
3. 将处理完毕的CSS代码重新生成成普通的CSS文件，可以是通过压缩、格式化等方式。
   

PostCSS与其他CSS预处理器如Sass和Less的不同之处在于，PostCSS不需要创建自己的语言或者语法，而是可以直接使用CSS原生的语法和属性。同时，PostCSS的插件也具有高度的可复用性，因为它们只需要操作AST而非独立的样式表。

总体来说，PostCSS的工作机制可以让开发者更加方便地实现各种高级的CSS功能和效果，并且它还可以根据实际需求来选择使用不同的插件，自由度很高。

6.3 工程架构

6.3.1 CSS 模块化

CSS模块化是一种CSS代码组织的方式，旨在解决CSS全局作用域、重复代码等问题。模块化使得CSS代码更加易于维护，增强了代码的可读性和可扩展性。

常见的CSS模块化方案包括以下几种：

1. BEM（Block Element Modifier）：BEM是一种基于命名约定的CSS模块化方案，它将CSS代码划分为独立的块（block）、元素（element）和修饰符（modifier），并使用特定的命名规则来表达它们之间的关系。通过这种方式，可以避免不必要的命名冲突和选择器嵌套。
   
2. SMACSS（Scalable and Modular Architecture for CSS）：SMACSS提倡将CSS代码分为五个不同的类别，即基础（base）、布局（layout）、模块（module）、状态（state）和主题（theme），并使用相应的命名约定和规则组织CSS代码。这种方式使得CSS代码更具灵活性和可扩展性，并且易于维护。
   
3. OOCSS（Object-Oriented CSS）：OOCSS将CSS视为对象，尽量避免复杂的选择器嵌套和重复的代码。它利用类似面向对象编程的方法，把样式定义为可重用的独立对象，从而减少代码的冗余和维护成本。
   
4. CSS模块：CSS模块是一种浏览器原生支持的模块化方案，它将CSS代码封装在单独的模块中，并使用@import指令引入。这样可以避免全局作用域和命名冲突，并提高CSS代码的可重用性和可维护性。
   

总之，CSS模块化是一种提高CSS代码质量和可维护性的有效方法，适合于大型项目和多人协作的开发环境。

6.3.2 CSS in JS

CSS in JS是一种利用JavaScript代码定义CSS样式的技术，而不是将样式定义在单独的CSS文件中。这种方法允许开发人员编写可重用的UI组件并具有封装样式和行为的特点，可以帮助减少类名冲突并提高大型代码库的可维护性。

有多个流行的库和框架支持CSS in JS，例如styled-components、emotion和glamorous。这些工具提供了在JavaScript代码中使用熟悉的CSS语法定义样式的机制，并且还提供诸如主题、基于props或state的动态样式等功能以及服务器端渲染等功能。

虽然CSS in JS具有一些优点，但也有批评者认为它可能会引入性能问题并使调试变得更加困难。与任何架构决策一样，在决定是否在特定项目中使用CSS in JS之前，应仔细考虑其利弊。

6.3.4 原子化 CSS

原子化CSS是一种CSS编写方式，旨在通过使用单个CSS属性的小类（即“原子”）来构建样式，使得样式表更加可复用和易于维护。这些小类通常包含了单一的样式规则，并根据需要进行组合。

相对于传统的CSS编写方式，即将样式按照元素和类名进行组织，原子化CSS更加精细和模块化。由于样式规则被拆分为单个原子，它们可以更加灵活地应用于不同的元素和组件中，从而减少代码冗余并提高可重用性。此外，由于原子化CSS的每个类都具有特定的含义，因此也增强了代码的可读性。

原子化CSS通常与CSS预处理器如Less、Stylus等结合使用，以便能够更容易地生成CSS类。另外，在React等JavaScript库中使用JSS（JavaScript Style Sheets）或Emotion等CSS in JS技术也可以实现类似的效果。不过，使用原子化CSS也可能会带来一些不利因素，例如类名冲突问题和难以覆盖一些较复杂的样式需求。

6.3.5 Tailwind

Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的的类，它们能直接在脚本标记语言中组合起来，构建出任何设计

中文文档 - Tailwind CSS 中文文档

课程总结