CSS修仙传：终章·飞升大典

《CSS修仙传：终章·飞升大典》

楔子：天劫降临

护山大阵突然剧烈震动，天空裂开一道横贯百里的空间裂缝。"CSS-in-JS天劫！"掌门道玄真人面色凝重，"这是前端界最高阶的雷劫，需要五篇绝学合一才能抵挡！"

控制台疯狂报错：

复制

Warning: Prop `className` did not match...
Hydration failed because the initial UI...
Styled Components server-client mismatch...

第一章：现代前端架构

1.1 技术选型

林惊羽师姐祭出法宝清单：

markdown

复制

- 框架：Vue 3.3 + `<script setup>`
- 样式：CSS Modules + PostCSS
- 预处理器：Sass Modules
- 工具：Vite 4 + UnoCSS
- 类型系统：TypeScript 5

1.2 目录结构

掌门展示渡劫专用项目结构：

bash

复制

src/
├── assets/
│   └── styles/          # 全局样式
│       ├── reset.scss   # 现代化reset
│       └── tokens.scss  # 设计Token
├── components/
│   └── Button/
│       ├── index.ts     # 组件出口
│       ├── Button.vue   # 组件本体
│       └── style.module.scss # 组件样式
└── composables/
    └── useTheme.ts      # 主题逻辑

第二章：Vue3样式架构

2.1 Scoped样式进阶

我尝试在单文件组件中写样式：

vue

复制

<style scoped>
/* 深度选择器 */
:deep(.ant-input) {
  border-color: var(--primary);
}

/* 插槽内容样式 */
:slotted(.item) {
  padding: 8px;
}

/* 全局样式 */
:global(.monospace) {
  font-family: Monaco;
}
</style>

2.2 CSS Modules集成

师姐演示Vue3最佳实践：

vue

复制

<template>
  <button :class="$style.button">
    <slot />
  </button>
</template>

<script setup>
const $style = useCssModule()
</script>

<style module>
.button {
  color: var(--text);
  background: var(--primary);
}
</style>

第三章：主题切换系统

3.1 设计Token工程化

掌门搭建多主题系统：

scss

复制

// tokens.scss
:root {
  // 默认主题
  --primary: #{map-get($themes, light, primary)};
  --text: #{map-get($themes, light, text)};
}

[data-theme="dark"] {
  --primary: #{map-get($themes, dark, primary)};
  --text: #{map-get($themes, dark, text)};
}

3.2 运行时主题切换

我实现主题Composable：

typescript

复制

// useTheme.ts
export function useTheme() {
  const theme = ref<'light' | 'dark'>('light')

  watch(theme, (val) => {
    document.documentElement.setAttribute('data-theme', val)
    localStorage.setItem('theme', val)
  })

  return { theme }
}

第四章：性能优化终局

4.1 UnoCSS原子化

师姐引入终极样式方案：

ts

复制

// vite.config.ts
import Unocss from 'unocss/vite'

export default defineConfig({
  plugins: [
    Unocss({
      presets: [
        presetUno(), // 默认预设
        presetAttributify() // 属性化模式
      ]
    })
  ]
})

4.2 关键CSS提取

掌门施展SSR优化大法：

ts

复制

import { extractCritical } from 'unocss/server'

const { css } = extractCritical(await renderToString(app))

终极渡劫测验

1. 实现支持SSR的主题切换系统
2. 对比Scoped CSS和CSS Modules的性能差异
3. 用UnoCSS重写现有组件库
4. 解决Vue3水合过程中的样式闪烁问题

---

后记

历经五篇修炼，张小凡终于参透CSS大道。当最后一缕天劫散去，控制台浮现出金色日志：

复制

[CSS Immortal] Congratulations!
Mastery Level: 99.9%
Unlocked Achievement: 
"Frontend Archmage"

从此，前端江湖多了一位传说——凡是用过他代码的开发者，再也不会被样式问题困扰。而那个曾经被嘲笑的杂役弟子，如今已成为各大技术大会争相邀请的"CSS仙尊"。

（全篇完）