CSS 工程化核心原理与实战--掘金小册课程推荐/优惠

作者介绍

清清玄，高级前端工程师，阿里云认证专家博主，开源框架 AdminWork 的作者。有多年 Android 移动端开发经验，现致力于Web 前端开发。对原生移动端开发、Vue、React、小程序、uni-app 等技术有一定的认识和丰富的开发经验。

• 开源框架 AdminWork 官网： http://www.vueadminwork.com

小册介绍

众所周知，在 Web 项目开发中，无论是企业官网，还是门户或者平台网站，再到后面发展流行起来的移动端 Web 页面，其美轮美奂的效果都离不开 CSS。

虽然相较于其他语言（如 JavaScript），CSS 语言本身简单且好理解，但是真正能做到通过各种属性样式组合出各种场景或者动画效果却也不是一件简单的事，这需要大量的实战经验，不断学习、不断总结才可以致于此。

CSS 语法本身也并不复杂，但其样式属性众多且浏览器的兼容性和屏幕适配的问题让很多新手或者一些后端人员望而却步。

好在随着一些框架如 JQuery、BootStrap 等的出现，降低了我们日常开发的难度。早期靠着这些框架，我们的确可以很快地完成一些中小型项目的开发与维护。但随着项目的不断增大，或者页面的复杂程度和用户体验要求越来越高，我们也越来越力不从心。

不过与此同时，一些新兴的前端框架和工具的出现，也正在逐步解决我们遇到的这些问题。所以，本小册就结合当前 Web 前端的主流发展，从 CSS 角度介绍我们在项目开发中应该如何做到项目的模块化和工程化式开发。

本小册共划分为 五大模块，具体内容设置如下：

1. 基础篇：简单熟悉一下 CSS 基本知识，以及 CSS 中一些比较难以理解的概念。
2. 预处理器篇：详细介绍当前主流的三大预处理器框架的语法及用法，让你近距离感受 CSS 编程之美。
3. 进阶篇：重点讲解 PostCSS 的插件机制，以及 Webpack、Vite 这些打包工具跟 CSS 的关系与配置。
4. 原子化篇：作为现在的主流，CSS 原子化发展势头正盛，所以本模块会详细分析 TailwindCSS 和 UnoCSS 两大原子化框架。
5. 实践篇：“纸上得来终觉浅”，在前面学习了那么多知识之后，最后一起通过两个案例（小程序和后端管理框架）把知识综合运用起来，达到融会贯通。

整体内容可梳理为如下思维导图：

你会学到什么？

• 基础篇：从头梳理 CSS，搞明白 CSS 中一些难懂的知识点。
• 预处理器篇：零基础入门，循序渐进式进入 CSS 可编程化的部分，打好走向前端高级工程师或者架构师的每一步基础。
• 进阶篇：全面通关构建打包工具与 CSS 的关系，让你知其然更知其所以然，为以后打造自己的框架夯实基础。
• 原子化篇：掌握主流的 CSS 原子化框架。
• 实战篇：综合前面所学的 CSS 知识，理论付诸实践，一步步搭建出项目框架。

适宜人群

• 能力提升：有一定的 CSS 基础，想要进阶学习。
• 全面提升：想要对 CSS 工程化有一个全面的认知。
• 后端人群：打通 Web 编程中“最难”部分的关卡，加快进入全栈工程师的步伐。

• 开篇：升职涨薪必备技能 CSS 工程化

• 基础篇：CSS 基本概述

• 基础篇：你可能不知道的 CSS 优先级

• 基础篇：前端必知必会 CSS 中常见难以理解的概念

• 基础篇：细说 CSS 中的选择器、伪类和伪元素

• 基础篇：实战 CSS 中的变量和函数

• 预处理器篇：零基础入门 CSS 预处理器框架

• 预处理器篇：Less 安装、变量及运算

• 预处理器篇：项目必备 Sass 安装、变量及运算

• 预处理器篇：Less 嵌套规则 & 和继承

• 预处理器篇：技能提升 Sass 嵌套规则 & 和指令

• 预处理器篇：Less 函数和混入

• 预处理器篇：Stylus 安装、变量及运算

• 预处理器篇：Stylus 嵌套规则、流程控制和指令

• 预处理器篇：Stylus 函数和混入

• 进阶篇：两三行配置就能解决大问题—Webpack 与 CSS

• 进阶篇：还不知道 CSS 模块化是什么？

• 原子化篇：原子化介绍及应用这一篇就够了

• 进阶篇：面试常问的 PostCSS 介绍与插件机制

• 进阶篇：涨薪全靠它 — PostCSS 插件实战

• 进阶篇：跟上时代潮流彻底掌握 Vite 与 CSS

• 原子化篇：时代宠儿 — UnoCSS 的介绍及使用

• 原子化篇：通关开发利器 TailwindCSS

• 实战篇：实战 uniapp 商城小程序

• 原子化篇：TailwindCSS 执行过程源码分析

• 实战篇：实战字节框架出品 UI 组件库— ArcoDesign + Vue3 + TS 后台管理系统

• 结束篇：是结束，也是新的开始