这门课解决什么问题

很多前端开发者在接手中大型项目时，往往陷入样式管理的泥潭：类名命名混乱、全局污染严重、主题切换困难，或者虽然使用了 BEM 命名规范，却因缺乏系统性的架构思维，导致代码库随时间推移变得难以维护。本课程以蘑菇街电商项目为实战载体，核心解决的是「如何从零搭建一套科学、分层、可复用的 CSS 架构体系」这一痛点。

它不仅仅是讲解 Sass 或 Less 的语法糖，而是深入拆解 OOCSS（面向对象 CSS）和 SMACSS 设计理念，教你如何将样式代码严格划分为 Settings、Tools、Base、Components、Abstracts 和 Theme 六个层级。通过这套体系，你能清晰界定基础重置、通用工具、业务组件与主题配置的边界，从根本上杜绝样式冲突，提升团队协作效率。

适合什么基础、建议先看哪几块

本课程适合具备 Vue3 基础开发能力、熟悉 CSS3 常用属性及 Sass/Less 预处理器基本用法的中级前端开发者。如果你对 Vue 生命周期、组件通信尚不熟悉，或从未接触过模块化 CSS 思想，直接学习可能会有吃力感。

建议的学习顺序如下：

  • 理论基础期：务必先看完第2章的 2-5 至 2-7 节，这是关于 CSS 设计模式的核心理论，理解了 OOCSS 原则，后续的分层代码才能融会贯通。
  • 架构落地期：紧接着学习 2-9 至 2-22 节，这是课程的骨架。每一层的代码实现（如 Settings 变量管理、Tools 工具类封装、Components 组件样式隔离）都需要跟着视频逐行敲写，切勿只看不动手。
  • 实战验证期：最后进入第3章，利用 MockJS 模拟后端接口，结合已搭建的架构实现蘑菇街首页。这是检验架构是否合理、能否真正落地的关键阶段。

学完能独立做什么、资料怎么配合练习

完成本课程后，你将能够独立为一个中等规模的前端项目设计并落地完整的 CSS 架构。你不再需要为每个组件编写孤立且耦合的样式，而是能通过 Tools 层高效复用工具类，通过 Components 层实现样式的模块化管理，通过 Theme 层灵活控制全站主题。更重要的是，你掌握了应对复杂样式需求时的分层思维，这在面试和实际工作中都是重要的核心竞争力。

在配合资料练习时，请重点关注环境一致性。课程中涉及 Vue3 创建与 Node 版本选择技巧，建议严格按照视频指引配置本地开发环境。在练习各层代码实现时，建议建立独立的 Git 仓库，分阶段提交代码，以便回溯每一层的演进逻辑。特别是在 Components 层练习中，尝试复用已有的工具类去优化蘑菇街首页的样式，体会架构带来的维护便利，这才是本套资料的最大价值所在。

课程目录

第1章 课程介绍(了解本课程必看) 试看 1 节 | 7分钟 1-1 导学 (06:16).mp4
 第2章 蘑菇街之 CSS 架构搭建 

23 节 | 241分钟 2-1 课前了解.mp4
 2-2 vue3创建与初始配置 (16:14).mp4
 2-3 vue3创建与初始配置 (18:00).mp4
 2-4 node版本选择小技巧.mp4
 2-5 CSS设计模式完结（1） (18:05).mp4
 2-6 CSS设计模式完结（2） (23:42).mp4
 2-7 CSS设计模式完结（3） (17:35).mp4
 2-8 按 OOCSS 原则重写如下样式.mp4
 2-9 CSS架构方案 (16:41).mp4
 2-

10 CSS架构之Settings层代码实现 (19:31).mp4
 2-

11 CSS架构之Tools层代码实现（上） (07:07).mp4
 2-

12 CSS架构之Tools层代码实现（下） (11:50).mp4
 2-13 CSS架构之Base层代码实现（1） (05:16).mp4
 2-14 CSS架构之Base层代码实现（2） (11:07).mp4
 2-

15 CSS架构之Components层代码实现（上） (09:09).mp4
 2-

16 CSS架构之Components层代码实现（中） (09:43).mp4
 2-

17 CSS架构之Components层代码实现（下） (16:09).mp4
 2-

18 CSS架构之Acss层代码实现（上） (07:48).mp4
 2-

19 CSS架构之Acss层代码实现（下） (08:21).mp4
 2-

20 CSS架构之Theme层代码实现（上） (04:43).mp4
 2-

21 CSS架构之Theme层代码实现（中） (11:17).mp4
 2-

22 CSS架构之Theme层代码实现（下） (07:44).mp4
 2-23 面试题.mp4
 第3章 蘑菇街首页 

18 节 | 158分钟 3-1 课前了解.mp4
 3-2 搭建本地 MockJs（上） (04:53).mp4
 3-3 搭建本地 MockJs（下） (12:50).mp4
 3-4 响应式布局（上） (03:23).mp4
 3-5 响应式布局（下） (05:50).mp4
 3-6 自适应 VW 布局.mp4
 3-7 首页设计稿构思 (03:28).mp4
 3-8 架构之Elements层扩展 (12:57).mp4
 3-9 架构之ACSS层扩展（上） (13:45).mp4
 3-

10 架构之ACSS层扩展（下） (09:59).mp4
 3-

11 架构之Components层扩展（上） (12:07).mp4
 3-

12 架构之Components层扩展（下） (15:39).mp4
 3-

13 多色图标 SvgIcon (12:40).mp4
 3-

14 launch 组件中星星图标用 SvgIcon 实现.mp4
 3-

15 纯 CSS 实现轮播图 (14:04).mp4
 3-

16 完成首页布局（上） (15:54).mp4
 3-

17 完成首页布局（下） (20:29).mp4
 3-18 面试题.mp4
 第4章 蘑菇街商城页 4 节 | 23分钟 4-1 课前了解.mp4
 4-2 商城页设计稿构思 (03:52).mp4
 4-3 架构之 Components 层扩展 (08:59).mp4
 4-4 完成商城页布局 (09:20).mp4
 第5章 蘑菇街时快抢页 8 节 | 81分钟 5-1 课前了解.mp4
 5-2 限时快抢页设计稿构思 (04:08).mp4
 5-3 中文字体压缩：字蛛（font-spider） (17:28).mp4
 5-4 border-radius原理及实现复杂图形 (15:08).mp4
 5-5 完成限时快抢页布局（上） (10:08).mp4
 5-6 完成限时快抢页布局（中） (15:29).mp4
 5-7 完成限时快抢页布局（下） (17:40).mp4
 5-8 面试题.mp4
 第6章 蘑菇街直播列表页 5 节 | 37分钟 6-1 课前了解.mp4
 6-2 直播列表页设计稿构思 (03:44).mp4
 6-3 ACSS层扩展滤镜特效 (08:28).mp4
 6-4 完成直播列表页布局（上） (14:51).mp4
 6-5 完成直播列表页布局（下） (09:39).mp4
 第7章 蘑菇街直播详情页 4 节 | 31分钟 7-1 课前了解.mp4
 7-2 直播详情页设计稿构思 (04:02).mp4
 7-3 方案的选择 (10:32).mp4
 7-4 完整直播详情页 (16:02).mp4
 第8章 经典框架之 CSS 源码分析 6 节 | 48分钟 8-1 课前了解.mp4
 8-2 ElementUI 之 CSS 架构揭秘new (06:49).mp4
 8-3 Ant Design 之 CSS 架构揭秘 (06:23).mp4
 8-4 Bootstrap 之 CSS 架构揭秘 (11:52).mp4
 8-5 TailWind 框架介绍（上） (08:25).mp4
 8-6 TailWind 框架介绍（下） (14:19).mp4
 第9章 CSS 奇淫巧计 5 节 | 51分钟 9-1 课前了解.mp4
 9-2 CSSModules（上） (12:37).mp4
 9-3 CSSModules（下） (10:55).mp4
 9-4 CSS-in-JS (14:09).mp4
 9-5 CSS视差滚动 (12:57).mp4
 第10章 打造高性能 CSS 动画 

13 节 | 135分钟 10-1 课前了解.mp4
 10-2 通过渲染原理看动画 (08:57).mp4
 10-3 高性能CSS动画（上） (15:01).mp4
 10-4 高性能CSS动画（中） (13:34).mp4
 10-5 高性能CSS动画（下） (07:04).mp4
 10-6 CSS Time (10:49).mp4
 10-7 动画实战（1） (10:49).mp4
 10-8 动画实战（2） (11:20).mp4
 10-9 动画实战（3） (11:29).mp4
 10-10 动画实战（4） (18:13).mp4
 10-11 动画实战（5） (12:44).mp4
 10-12 动画实战（6） (14:11).mp4
 10-13 面试题.mp4
 第11章 课程总结 1 节 | 2分钟 11-1 11课程总结 (01:41).mp4