课程介绍

CSS架构系统精讲课程是一门专注于CSS架构和组织的课程。该课程旨在帮助学习者理解和掌握高效、可维护的CSS代码结构和组织方法。

课程内容主要包括以下几个方面：

1. CSS架构原则和方法：介绍常见的CSS架构原则，如DRY（Don’t Repeat Yourself）原则、BEM（Block-Element-Modifier）命名规范等。学习如何使用这些原则和规范来组织CSS代码，提高代码的可读性和可维护性。
2. CSS预处理器：介绍常见的CSS预处理器，如Sass和Less。学习如何使用预处理器的功能，如变量、嵌套、混合等，来简化CSS代码的编写和维护。
3. 模块化CSS：学习如何将CSS代码分割为独立的模块，每个模块负责一个特定的功能或样式。通过模块化的CSS结构，可以提高代码的可复用性和可扩展性。
4. CSS框架和工具：介绍常见的CSS框架和工具，如Bootstrap和PostCSS。学习如何使用这些框架和工具来加速CSS开发，提高代码的效率和质量。

课程以理论和实践相结合的方式进行教学，通过讲解概念和原则，以及实际案例和练习，帮助学习者掌握CSS架构和组织的技巧和方法。课程适合前端开发人员、网页设计师以及对CSS架构和组织感兴趣的人士。

课程目录

/【imooc-501】2021必修 CSS架构系统精讲（完结）/
│├─学习必看.png 148.3KB
│├─源码资料
│├─第1章 课程介绍(了解本课程必看)
│├─第2章 蘑菇街之 CSS 架构搭建
│├─第3章 蘑菇街首页
│├─第4章 蘑菇街商城页
│├─第5章 蘑菇街时快抢页
│├─第6章 蘑菇街直播列表页
│├─第7章 蘑菇街直播详情页
│├─第8章 经典框架之 CSS 源码分析
│├─第9章 CSS 奇淫巧计
│├─第10章 打造高性能 CSS 动画
│├─第11章 课程总结

详细目录

第1章 课程介绍(了解本课程必看)/
│├─1-1 导学.mp4 29.4MB
第2章 蘑菇街之 CSS 架构搭建/
│├─2-1 vue3创建与初始配置.mp4 60MB
│├─2-10 CSS架构之Base层代码实现（1）.mp4 17MB
│├─2-11 CSS架构之Base层代码实现（2）.mp4 44.7MB
│├─2-12 CSS架构之Base层代码实现（3）.mp4 86.3MB
│├─2-13 CSS架构之Base层代码实现（4）.mp4 24.4MB
│├─2-14 CSS架构之Components层代码实现（上）.mp4 26MB
│├─2-15 CSS架构之Components层代码实现（中）.mp4 51.8MB
│├─2-16 CSS架构之Components层代码实现（下）.mp4 99.2MB
│├─2-17 CSS架构之Acss层代码实现（上）.mp4 21.4MB
│├─2-18 CSS架构之Acss层代码实现（中）.mp4 86.2MB
│├─2-19 CSS架构之Acss层代码实现（下）.mp4 96.6MB
│├─2-2 vue3创建与初始配置.mp4 69MB
│├─2-20 CSS架构之Theme层代码实现（上）.mp4 23.6MB
│├─2-21 CSS架构之Theme层代码实现（中）.mp4 57.4MB
│├─2-22 CSS架构之Theme层代码实现（下）.mp4 31.9MB
│├─2-3 CSS设计模式完结（1）.mp4 62MB
│├─2-4 CSS设计模式完结（2）.mp4 78.3MB
│├─2-5 CSS设计模式完结（3）.mp4 55.4MB
│├─2-6 CSS架构方案.mp4 45MB
│├─2-7 CSS架构之Settings层代码实现.mp4 89.9MB
│├─2-8 CSS架构之Tools层代码实现（上）.mp4 25.3MB
│├─2-9 CSS架构之Tools层代码实现（下）.mp4 82.4MB
第3章 蘑菇街首页/
│├─3-1 搭建本地 MockJs（上）.mp4 16.9MB
│├─3-10 架构之Components层扩展（下）.mp4 79MB
│├─3-11 多色图标 SvgIcon.mp4 52.2MB
│├─3-12 纯 CSS 实现轮播图.mp4 57.2MB
│├─3-13 完成首页布局（上）.mp4 110.4MB
│├─3-14 完成首页布局（下）.mp4 223MB
│├─3-2 搭建本地 MockJs（下）.mp4 54.9MB
│├─3-3 响应式布局（上）.mp4 9.3MB
│├─3-4 响应式布局（下）.mp4 23.1MB
│├─3-5 首页设计稿构思_.mp4 14.7MB
│├─3-6 架构之Elements层扩展].mp4 102.1MB
│├─3-7 架构之ACSS层扩展（上）.mp4 59.9MB
│├─3-8 架构之ACSS层扩展（下）.mp4 50.8MB
│├─3-9 架构之Components层扩展（上）.mp4 55MB
第4章 蘑菇街商城页/
│├─4-1 商城页设计稿构思.mp4 22.1MB
│├─4-2 架构之 Components 层扩展.mp4 37.1MB
│├─4-3 完成商城页布局].mp4 74.2MB
第5章 蘑菇街时快抢页/
│├─5-1 限时快抢页设计稿构思.mp4 23.1MB
│├─5-2 中文字体压缩：字蛛（font-spider）.mp4 19.4MB
│├─5-3 border-radius原理及实现复杂图形.mp4 47.5MB
│├─5-4 完成限时快抢页布局（上）.mp4 67.6MB
│├─5-5 完成限时快抢页布局（中）.mp4 107.8MB
│├─5-6 完成限时快抢页布局（下）.mp4 138.9MB
第6章 蘑菇街直播列表页/
│├─6-1 直播列表页设计稿构思.mp4 21.7MB
│├─6-2 ACSS层扩展滤镜特效.mp4 53.5MB
│├─6-3 完成直播列表页布局（上）.mp4 104.3MB
│├─6-4 完成直播列表页布局（下）.mp4 65.6MB
第7章 蘑菇街直播详情页/
│├─7-1 直播详情页设计稿构思.mp4 19.8MB
│├─7-2 方案的选择.mp4 40.3MB
│├─7-3 完整直播详情页.mp4 105.5MB
第8章 经典框架之 CSS 源码分析/
│├─8-1 ElementUI 之 CSS 架构揭秘new.mp4 33.4MB
│├─8-2 Ant Design 之 CSS 架构揭秘.mp4 24.7MB
│├─8-3 Bootstrap 之 CSS 架构揭秘.mp4 81MB
│├─8-4 TailWind 框架介绍（上）.mp4 34.6MB
│├─8-5 TailWind 框架介绍（下）.mp4 96.5MB
第9章 CSS 奇淫巧计/
│├─9-1 CSSModules（上）.mp4 39.4MB
│├─9-2 CSSModules（下.mp4 61.8MB
│├─9-3 CSS-in-JS.mp4 58.3MB
│├─9-4 CSS视差滚动.mp4 62.8MB
第10章 打造高性能 CSS 动画/
│├─10-1 通过渲染原理看动画.mp4 35.8MB
│├─10-2 高性能CSS动画（上）.mp4 46.2MB
│├─10-3 高性能CSS动画（中）.mp4 33.7MB
│├─10-4 高性能CSS动画（下）.mp4 41MB
│├─10-5 CSS Time.mp4 47.1MB
第11章 课程总结/
│├─11-1 11课程总结.mp4 2.5MB
源码资料/
│├─mogu-production-maste.zip 2MB