本次课程主要内容
CSS 简要发展历史
CSS，全称为层叠样式表（Cascading Style Sheets），是一种用于描述网页展示效果的语言。它可以定义字体、颜色、布局、边框、背景等方面的样式，使得网页看起来更加美观、规范、易读。
CSS的发展历史可以大致分为以下几个阶段：
- 1994年-1996年，CSS的诞生。在Web诞生初期，网页的排版样式是直接写在HTML标签中的，这导致了维护困难、代码冗长的问题。于是，W3C组织开始着手开发CSS规范，并在1996年发布了CSS1标准。
- 1998年-2007年，CSS的成熟和普及。随着CSS在网站开发中的应用越来越广泛，W3C不断更新和完善了CSS规范，同时也涌现出了许多优秀的CSS框架和预处理器，如Bootstrap、LESS、SASS等，使得CSS的编写变得更加高效、灵活、可重用。
- 2009年至今，CSS3时代的到来。CSS3是CSS规范的最新版本，新增了大量的特性和功能，如动画、渐变、阴影、弹性盒子、网格布局等，使得网页样式的实现更加丰富、灵活、响应式。
总之，CSS从最初的实验性语言到如今的成熟体系，经历了一个漫长而又不断创新的发展过程，为Web设计和开发带来了前所未有的变革。
① 基础知识
1.1 选择器
1.2 选择器的优先级
内联
>id>class=attribute=pseudo-class>type=pseudo-element
属性继承
CSS 中的 值 和单位
盒子模型
盒模型例子
② 布局和定位
2.1 概述
2.2 块级格式化上下文(block formating context)
块级格式化上下文（Block Formatting Context）是Web页面中的一种CSS渲染模式，它决定了元素如何布局和相互作用。
具体来说，当一个HTML元素形成了BFC时，它会创建一个独立的渲染区域，在这个区域内的元素布局不会影响到外部元素。这也就意味着，同一个BFC区域内的元素会按照一定的规则进行垂直方向的布局，而且它们之间的边距、浮动等属性也会受到特殊的处理。
常见的触发BFC的条件包括：
- 根元素
- 浮动元素（float属性不为none）
- 绝对定位元素（position为absolute或fixed）
- display属性值为inline-block、table-cell、table-caption、flex、inline-flex的元素
- overflow属性值不为visible的元素
在实际开发中，我们可以利用BFC的特性，来解决一些布局上的难题，如清除浮动、避免margin重叠等问题。同时，BFC还可以提高页面渲染的效率和性能。
2.3 内联级格式化上下文（Inline Formatting Context）
内联级格式化上下文（Inline Formatting Context）是Web页面中的另一种CSS渲染模式，它定义了内联元素（inline-level boxes）如何排列和相互作用。
具体来说，当一个HTML元素形成了IFC时，它会创建一个独立的渲染区域，其中内联元素会按照一定的规则进行水平方向的布局，同时也会受到特殊的处理，例如可以通过vertical-align属性来控制它们在垂直方向上的对齐方式。
常见触发IFC的条件包括：
- 根元素
- display属性值为inline、inline-block、inline-table、inline-flex的元素
- 设置了text-align、vertical-align、line-height属性的元素
- 在块级元素中的文本内容
在实际开发中，我们可以利用IFC的特性，来解决一些布局上的问题，如水平居中、文本垂直居中等。同时，IFC还可以提高页面渲染的效率和性能。因此，在理解和应用BFC的基础上，深入理解IFC同样是很有必要的。
一些例子
- 单行文字垂直居中
<style>
.title{
background: #000;
color: #fff;
font-size: 18px;
line-height: 36px;
}
</style>
<body>
<div class="title">我是标题</div>
</body>- icon 和 文字 保持居中垂直
<style>
.title{
background: #000;
color: #fff;
font-size: 18px;
margin-left: 4px;
vertical-align: middle;
}
.image{
width: 24px;
height: 24px;
vertical-align: middle;
}
</style>
<div class="warp">
<div class="title">奥里给</div>
<img src="图片相对地址" class="image">
</div>2.4 外边距塌陷
2.5 弹性盒子布局(常用✌️✌️✌️)
可以去看下我这篇文章 详细讲解了flex 布局
FLex布局详解 - 掘金 (juejin.cn)
2.6 Grid 布局
CSS Grid Layout是CSS的一项新特性，它可以帮助我们灵活、高效地构建网页布局。GRID布局简单来说就是基于行和列进行定位而构成自适应的二维网格。
以下是使用Grid布局实现网页布局的基本步骤：
- 在父容器中定义grid环境：通过给父元素设置display: grid属性，创建一个grid环境。
- 划分行与列：通过grid-template-rows、grid-template-columns属性划分出网格的行与列，并可设置其大小等信息。
- 定义子元素位置：通过grid-row、grid-column属性指定每个子元素要占据哪些行与列，或者使用grid-area属性直接为每个子元素指定代表区域。
- 调整子元素大小：通过使用grid-row-span、grid-column-span、grid-row-start、grid-row-end、grid-column-start、grid-column-end等属性，对子元素进行跨行或跨列操作、或者调整子元素的尺寸。
- 完善样式：对子元素进行样式调整，如添加背景色、边框等，使之更符合设计要求。
学习和使用CSS Grid布局可以优化网页排版布局，增强网页的美观度和交互性。同时，该技术也在不断完善和发展中，为Web开发提供更多的可能性。
示例 :
demo代码: CSS部分
代码语言：javascript复制 .container {
display: grid;
grid-template-rows: repeat(2, 1fr);
/* 将容器划分为两行，每行占据相等的空间 */
grid-template-columns: repeat(2, 1fr);
/* 将容器划分为两列，每列占据相等的空间 */
gap: 10px;
/* 设置网格之间的间隔 */
background-color: pink;
}
.box1 {
grid-row: 1 / 2;
/* 指定该元素跨越第一行到第二行 */
grid-column: 1 / 2;
/* 指定该元素跨越第一列到第二列 */
background-color: #f00;
/* 设置背景色 */
}
.box2 {
grid-row: 1 / 2;
/* 指定该元素跨越第一行到第二行 */
grid-column: 2 / 3;
/* 指定该元素跨越第二列到第三列 */
background-color: #0f0;
/* 设置背景色 */
}
.box3 {
grid-row: 2 / 3;
/* 指定该元素跨越第二行到第三行 */
grid-column: 1 / 2;
/* 指定该元素跨越第一列到第二列 */
background-color: #00f;
/* 设置背景色 */
}
.box4 {
grid-row: 2 / 3;
/* 指定该元素跨越第二行到第三行 */
grid-column: 2 / 3;
/* 指定该元素跨越第二列到第三列 */
background-color: #ff0;
/* 设置背景色 */
}HTML 部分
代码语言：javascript复制 <div class="container">
<div class="box1">Box 1</div>
<div class="box2">Box 2</div>
<div class="box3">Box 3</div>
<div class="box4">Box 4</div>
</div>效果图:
2.7 FLex 布局 和 Grid 布局 对比
2.8 定位
定位属性 | 作用描述 |
|---|---|
position: static | 默认值，元素在正常流中位置不受影响 |
position: relative | 相对定位，元素的位置相对于其正常位置进行偏移，但仍保持在正常流中 |
position: absolute | 绝对定位，元素的位置相对于最近的非static祖先元素确定，如果不存在，则相对于初始包含块。会从正常流中删除，并不保留原本位置的空白 |
position: fixed | 固定定位，元素的位置相对于viewport（浏览器窗口）进行偏移，不随滚动条滚动，会从正常流中删除，并不占据空间 |
position: sticky | 粘性定位，元素在跨越特定阈值前为相对定位，之后为固定定位 |
③ 层叠上下文（CSS Stacking Context）
3.1 概念
CSS层叠上下文（CSS Stacking Context）是CSS rendering的一个重要概念，它定义了元素如何根据z-index属性进行层次叠加。
具体来说，每个层叠上下文由一组HTML元素和它们的子元素构成，并且这些元素按照一定的规则垂直地贴合在一起形成平面。在这个平面中，每个层叠上下文都有自己的层级关系，即z轴方向的顺序。
在同一个层叠上下文中，具有较高z-index值的元素会被放置在具有较低z-index值的元素上方；而在不同层叠上下文中，其z-index值的比较就不仅仅局限于自身了，如以下几种情况：
- 层叠上下文父元素的背景色：当两个层叠上下文相互重叠时，如果父元素的背景色与子元素不同，则背景色优先于 z-index 判断。
- 层叠上下文的层级分离: 在不同层叠上下文之间，即使后者的位置在前者之下，元素的层级也可能反转，也就是说放在前面的元素可能被遮挡。
- 根据文档流的顺序：在相同层叠上下文中，后面出现的元素会覆盖在前面出现的元素之上。
3.2 形成层叠上下文的条件
形成层叠上下文的条件包括：
- 根元素即HTML元素
- position属性值为absolute、relative、fixed、sticky的元素
- display属性值为flex、inline-flex、grid、inline-grid的元素
- opacity属性值不为1的元素
- transform属性值不为none的元素
- mix-blend-mode属性值不为normal的元素
- filter属性值不为none的元素
- z-index属性值为除auto以外的数字的元素
- isolation属性值为isolate的元素
- -webkit-overflow-scrolling属性值为touch的元素
当一个元素形成了层叠上下文时，它就具有了一定的独立性和优先级，其子孙元素会在该元素内部形成自己的层叠关系，并且不会影响到其他元素。同时，该元素也可以通过z-index属性与其他元素进行相对位置调整。
3.3 编写z-index 的建议
④ 变形 过渡 动画
过渡
属性值
CSS 中提供了 5 个有关过渡的属性，如下所示：
属性名 | 属性解释 |
|---|---|
transition-property | 设置元素中参与过渡的属性 |
transition-duration | 设置元素过渡的持续时间 |
transition-timing-function | 设置元素过渡的动画类型 |
transition-delay | 设置过渡效果延迟的时间，默认为 0 |
transition | 简写属性，用于同时设置上面的四个过渡属性。 |
要成功实现过渡效果，必须定义以下两项内容：
- 元素中参数与过渡效果的属性；
- 过渡效果持续的时间。
提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过��时间的默认值为 0
提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。
提示：过渡效果通常会在鼠标悬停在元素上时发生，如果未设置过渡持续的时间，则过渡效果不会生效，因为过渡时间的默认值为 0。1. transition-property
1.1语法:
| transition-property: none || all || property | | ---------------------------------------------------- |
1.2属性值介绍
- none：表示没有属性参与过渡效果；
- all：表示所有属性都参与过渡效果；
- property：定义应用过渡效果的 CSS 属性名称列表，多个属性名称之间使用逗号
,进行分隔。
2. transition-duration
2.1语法
transition-duration 属性用来设置过渡需要花费的时间（单位为秒或者毫秒），语法格式如下：
transition-duration: time; |
|---|
2.2属性值介绍
其中，time 为完成过渡效果需要花费的时间（单位为秒或毫秒），默认值为 0，意味着不会有效果。
如果有多个参与过渡的属性，也可以依次为这些属性设置过渡需要的时间，多个属性之间使用逗号进行分隔，例如transition-duration: 1s, 2s, 3s;。除此之外，也可以使用一个时间来为所有参与过渡的属性设置过渡所需的时间。示例代码如下：
3. transition-timing-function
transition-timing-function 属性用来设置过渡动画的类型，属性的可选值如下：
值 | 描述 |
|---|---|
linear | 以始终相同的速度完成整个过渡过程，等同于 cubic-bezier(0,0,1,1) |
ease | 以慢速开始，然后变快，然后慢速结束的顺序来完成过渡过程，等同于 cubic-bezier(0.25,0.1,0.25,1) |
ease-in | 以慢速开始过渡的过程，等同于 cubic-bezier(0.42,0,1,1) |
ease-out | 以慢速结束过渡的过程，等同于 cubic-bezier(0,0,0.58,1) |
ease-in-out | 以慢速开始，并以慢速结束的过渡效果，等同于 cubic-bezier(0.42,0,0.58,1) |
cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义自己的值，每个参数的取值范围在 0 到 1 之间 |
4. transition-delay
4.1语法
transition-delay 属性用来设置过渡效果何时开始，属性的语法格式如下：
transition-delay: time; |
|---|
4.1属性值介绍
其中，参数 time 用来设置在过渡效果开始之前需要等待的时间，单位为秒或毫秒。
5. transition
5.1语法
transition 属性是上面四个属性的简写形式，通过该属性可以同时设置上面的四个属性，属性的语法格式如下：
transition: transition-property transition-duration transition-timing-function transition-delay; |
|---|
transition 属性中，transition-property 和 transition-duration 为必填参数，transition-timing-function 和 transition-delay 为选填参数，如非必要可以省略不写。另外，通过 transition 属性也可以设置多组过渡效果，每组之间使用逗号进行分隔，
示例代码如下：
代码语言：javascript复制 /*1.元素中参与过渡的属性 2.元素过渡的所需时间 3.元素过渡的动画模式 4. 延时执行的时长 */
transition: all 2s ease-in 3s;动画
1.@keyframes 规则
要创建 CSS 动画，您首先需要了解 @keyframes 规则，@keyframes 规则用来定义动画各个阶段的属性值，类似于 flash 动画中的关键帧，语法格式如下：
代码语言：javascript复制 @keyframes animationName {
/* 1.from：定义动画的开头，相当于 0%； */
from {
/* 2.properties：不同的样式属性名称，例如 color、left、width 等等。 */
properties: value;
}
/* 3.percentage：定义动画的各个阶段，为百分比值，可以添加多个； */
percentage {
properties: value;
}
/* 4.to：定义动画的结尾，相当于 100%；*/
to {
properties: value;
}
}
// 或者
/* animationName :表示动画的名称 */
@keyframes animationName {
0% {
properties: value;
}
percentage {
properties: value;
}
100% {
properties: value;
}
}语法说明如下：
- animationName：表示动画的名称；
- from：定义动画的开头，相当于 0%；
- percentage：定义动画的各个阶段，为百分比值，可以添加多个；
- to：定义动画的结尾，相当于 100%；
- properties：不同的样式属性名称，例如 color、left、width 等等。
2.CSS 中的动画属性
- animation-name：设置需要绑定到元素的动画名称；
- animation-duration：设置完成动画所需要花费的时间，单位为秒或毫秒，默认为 0；
- animation-timing-function：设置动画的速度曲线，默认为 ease；
- animation-fill-mode：设置当动画不播放时（动画播放完或延迟播放时）的状态；
- animation-delay：设置动画开始之前的延迟时间，默认为 0；
- animation-iteration-count：设置动画被播放的次数，默认为 1；
- animation-direction：设置是否在下一周期逆向播放动画，默认为 normal；
- animation-play-state：设置动画是正在运行还是暂停，默认是 running；
- animation：所有动画属性的简写属性。
animation-name
animation-name 属性用来将动画绑定到指定的 HTML 元素，属性的可选值如下：
值 | 描述 |
|---|---|
keyframename | 要绑定到 HTML 元素的动画名称，可以同时绑定多个动画，动画名称之间使用逗号进行分隔 |
none | 表示无动画效果 |
代码如下:
代码语言：javascript复制 <!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% { top: 0px; left: 0px;}
25% { top: 0px; left: 350px;}
50% { top: 200px; left: 350px;}
75% { top: 200px; left: 0px;}
100% { top: 0px; left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
position: relative;
animation-name: ball;
}
</style>
</head>
<body>
<div></div>
</body>
</html>animation-duration
animation-duration 属性用来设置动画完成一个周期所需要花费的时间，单位为秒或者毫秒。
代码语言：javascript复制 animation-duration: 2s;提示：动画若想成功播放，必须要定义 animation-name 和 animation-duration 属性。 |
|---|
animation-timing-function
animation-timing-function 属性用来设置动画播放的速度曲线，通过速度曲线的设置可以使动画播放的更为平滑。animation-timing-function 属性的可选值如下表所示：
值 | 描述 |
|---|---|
linear | 动画从开始到结束的速度都是相同的 |
ease | 默认值,动画从低速开始,然后加快,在结束前变慢 |
ease - in | 动画从低速开始 |
ease - out | 动画以低速结束 |
ease - in - out | 动画从低速开始,并且以低速结束 |
cubic-bezier(n, n, n, n) | 使用 cubic-bezier() 函数来定义动画的播放速度，参数的取值范围为 0 到 1 之间的数值 |
代码:
代码语言：javascript复制 <!DOCTYPE html>
<html>
<head>
<style>
@keyframes ball {
0% {left: 0px;}
50% {left: 350px;}
100% {left: 0px;}
}
div {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid black;
text-align: center;
line-height: 100px;
position: relative;
animation-name: ball;
animation-duration: 2s;
}
.one {
animation-timing-function: ease;
}
.two {
animation-timing-function: ease-in;
}
.three {
animation-timing-function: ease-out;
}
.four {
animation-timing-function: ease-in-out;
}
</style>
</head>
<body>
<div class="one">ease</div>
<div class="two">ease-in</div>
<div class="three">ease-out</div>
<div class="four">ease-in-out</div>
</body>
</html>图: animation-timing-function 属性演示
animation-fill-mode
animation-fill-mode 属性用来设置当动画不播放时（开始播放之前或播放结束之后）动画的状态（样式），属性的可选值如下：
值 | 描述 |
|---|---|
none | 不改变动画的默认行为 |
forwards | 当动画播放完成后，保持动画最后一个关键帧中的样式 |
backwards | 在animation-delay 所指定的时间段内，应用动画第一个关键帧中的样式 |
both | 同时遵循 forwards 和 backwards 的规则 |
animation-delay
animation-delay 属性用来定义动画开始播放前的延迟时间，单位为秒或者毫秒，属性的语法格式如下：
animation-delay: time; |
|---|
其中参数 time 就是动画播放前的延迟时间，参数 time 既可以为正值也可以为负值。参数值为正时，表示延迟指定时间开始播放；参数为负时，表示跳过指定时间，并立即播放动画。
代码语言：javascript复制 .one {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(75, 251, 239);
animation: one 3s ease-in-out infinite;
animation-delay: 3s;
}
.two {
position: absolute;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: rgb(1, 84, 123);
animation: one 3s ease-in-out infinite;
animation-delay: -3s;
}
@keyframes one {
0% {
left: 0px;
}
50% {
left: 350px;
}
100% {
left: 0px;
}
}animation-iteration-count
animation-iteration-count 属性用来定义动画播放的次数，属性的可选值如下：
值 | 描述 |
|---|---|
n | 使用具体数值定义动画播放的次数，默认值为 1 |
infinite | 表示动画无限次播放 |
代码展示:
代码语言：javascript复制 <div class="one">1</div>
<div class="two">infinite</div> @keyframes box {
0% {
transform: rotate(0);
}
50% {
transform: rotate(0.5turn);
}
100% {
transform: rotate(1turn);
}
}
div {
width: 100px;
height: 100px;
float: left;
border: 3px solid black;
text-align: center;
line-height: 100px;
position: relative;
animation-name: box;
animation-duration: 2s;
}
.one {
animation-iteration-count: 1;
}
.two {
margin-left: 50px;
animation-iteration-count: infinite;
}animation-direction
animation-direction 属性用来设置是否轮流反向播放动画，属性的可选值如下：
值 | 描述 |
|---|---|
normal | 以正常的方式播放动画 |
reverse | 以相反的方向播放动画 |
alternate | 播放动画时，奇数次（1、3、5 等）正常播放，偶数次（2、4、6 等）反向播放 |
alternate-reverse | 播放动画时，奇数次（1、3、5 等）反向播放，偶数次（2、4、6 等）正常播放 |
animation-play-state
animation-play-state 属性用来设置动画是播放还是暂停，属性的可选值如下：
值 | 描述 |
|---|---|
paused | 暂停动画的播放 |
running | 正常播放动画 |
animation
animation 属性是 animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state 几个属性的简写形式，通过 animation 属性可以同时定义上述的多个属性，语法格式如下：
代码语言：javascript复制 animation:
animation-name /* 动画的名称 */
animation-duration /* 动画执行的时长*/
animation-timing-function /* 动画执行的模式*/
animation-delay /* 延时动画执行*/
animation-iteration-count /* 动画执行的周期数*/
animation-direction /* 是否轮流反向播放动画 */
animation-fill-mode /* 动画暂停时(播放前,播放后)的样式*/
animation-play-state /* 设置动画是播放还是暂停*/性能相关
动画性能相关深入了解
硬件加速详解
⑤ 响应设计
5.1 响应式设计推荐遵循的原则
5.2 媒体查询的使用
CSS 媒体查询是一种可以根据设备类型或屏幕尺寸等特征，为不同的设备或尺寸定义不同的规则和样式表的技术。它允许我们为不同的设备提供定制化的布局，以更好地适应不同的设备和屏幕尺寸。在响应式设计中使用媒体查询非常普遍。
下面是一个基本的 CSS 媒体查询示例：
代码语言：javascript复制/* 当浏览器宽度小于 768px 时应用这些样式 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
background-color: #f1f1f1;
}
}
/* 当浏览器宽度大于等于 768px 时应用这些样式 */
@media screen and (min-width: 768px) {
body {
font-size: 18px;
background-color: #fff;
}
}上面的代码演示了如何在 CSS 中使用媒体查询。当浏览器宽度小于 768px 时，第一个媒体查询将应用规则集中的样式，而当浏览器宽度大于或等于 768px 时，第二个媒体查询将应用规则集中的样式。注意到每个媒体查询都包含一个媒介类型 "screen" 和一个条件表达式，条件表达式指定了媒体查询应用的范围。
除了浏览器宽度，还可以使用其他常见的媒体特征，如高度、设备方向和分辨率等，以适配不同的设备和屏幕。这些媒体特征可以在 CSS 规范中找到，并可以结合使用来实现更复杂的布局适配。
5.3 设备像素,参考像素 移动设备视口
5.3.1 设备像素
5.3.2 DPI && PPI
5.4 css3 像素
5.5 css常用单位
当开发网页时，CSS单位是一项非常重要的知识。下面是一些常见的CSS单位及其解释：
单位名称 | 含义 |
|---|---|
px（像素） | 一个基本的屏幕上的点，通常用于定义元素的具体大小。 |
em | 相对大小，相对于父元素的字号大小而言。如：font-size: 1.2em; 表示当前元素字号是父亲的1.2倍。 |
rem | 相对大小，与根元素（即 html）的字号大小有关。这个单位不受浏览器 font-size 调节的影响，因此是线性的。 |
%（百分比） | 相对于父元素的宽度/高度而言，可以用于设置元素的宽度、高度、内边距、外边距等。 |
vw/vh | 视口宽度单位（Viewport Width / Viewport Height），视口指窗口显示内容区域的大小。vw表示视口宽度的1/100，vh表示视口高度的1/100。 |
pt（磅） | 印刷单位，1pt=1/72英寸；用于打印样式表中。 |
mm/cm/in | 计量单位，毫米/厘米/英寸，用于打印样式表中。 |
⑥ CSS 生态相关
语言增强 : 预处理器 后处理器
工程架构: css模块化, css-in-js , Atomic Css
6.1 预处理器
6.2 后处理器- PostCSS
PostCSS是一个用JavaScript编写的工具，它可以在CSS代码被浏览器解析之前对其进行转换和处理。PostCSS可以扩展CSS语言，使其更加强大、灵活、易于维护。
PostCSS的工作机制主要由以下三个步骤组成：
- 将CSS代码解析为一个抽象语法树（Abstract Syntax Tree，AST）。
- 在这个AST中执行各种插件进行相应的转换或者处理工作。这些插件可以改变CSS规则或者生成新的CSS规则。
- 将处理完毕的CSS代码重新生成成普通的CSS文件，可以是通过压缩、格式化等方式。
PostCSS与其他CSS预处理器如Sass和Less的不同之处在于，PostCSS不需要创建自己的语言或者语法，而是可以直接使用CSS原生的语法和属性。同时，PostCSS的插件也具有高度的可复用性，因为它们只需要操作AST而非独立的样式表。
总体来说，PostCSS的工作机制可以让开发者更加方便地实现各种高级的CSS功能和效果，并且它还可以根据实际需求来选择使用不同的插件，自由度很高。
6.3 工程架构
6.3.1 CSS 模块化
CSS模块化是一种CSS代码组织的方式，旨在解决CSS全局作用域、重复代码等问题。模块化使得CSS代码更加易于维护，增强了代码的可读性和可扩展性。
常见的CSS模块化方案包括以下几种：
- BEM（Block Element Modifier）：BEM是一种基于命名约定的CSS模块化方案，它将CSS代码划分为独立的块（block）、元素（element）和修饰符（modifier），并使用特定的命名规则来表达它们之间的关系。通过这种方式，可以避免不必要的命名冲突和选择器嵌套。
- SMACSS（Scalable and Modular Architecture for CSS）：SMACSS提倡将CSS代码分为五个不同的类别，即基础（base）、布局（layout）、模块（module）、状态（state）和主题（theme），并使用相应的命名约定和规则组织CSS代码。这种方式使得CSS代码更具灵活性和可扩展性，并且易于维护。
- OOCSS（Object-Oriented CSS）：OOCSS将CSS视为对象，尽量避免复杂的选择器嵌套和重复的代码。它利用类似面向对象编程的方法，把样式定义为可重用的独立对象，从而减少代码的冗余和维护成本。
- 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 中文文档
课程总结
