前言

Hello，我是JowayYoung。首次写书，希望能给大家带来惊喜，能让大家爱上CSS。

本课程从0到1拥有一个完整的CSS知识体系，外加玩转CSS神操作骚技巧。主要以技巧作为出发点，让CSS创造更多意想不到的事情，通过概念、技巧、场景三合一的方式实现一些看似只能由JS才能实现的效果。

本课程以CSS神操作骚技巧作为核心内容，集齐CSS的基础+原理+进阶+技巧+实战，通过多种方式强化大家对CSS知识体系与CSS神操作骚技巧的吸收，帮助大家得心应手玩转CSS。

主题

何为技巧，意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺，推动着人类科学技术的发展，同时犹如文字一样承托着人类文化的进步。

每写一篇文章，都会使用大量的写作技巧。烘托、渲染、悬念、铺垫、照应、伏笔、联想、想象、抑扬结合、点面结合、动静结合、叙议结合、情景交融、首尾呼应、衬托对比、白描细描、比喻象征、借古讽今、卒章显志、承上启下、开门见山、动静相衬、虚实相生、实写虚写、托物寓意、咏物抒情等，这些都是大家从小到大写作而接触到的技巧。

作为开发者，编码同样也需大量的编码技巧。一份良好的代码能让人耳目一新，让人更易理解，让人舒服自然，同时也让自己成就感满满。

本课程以CSS神操作骚技巧作为核心内容，通过多个章节剖析CSS的艺术之美。很多同学都觉得CSS简单，但简单也能玩出很多新花样。在进入学习前先预览CSS实现一些看似只能由JS才能实现的效果。

结构类：通过结构选择器、Flex布局方式、对齐方式等方式实现

背景类：通过多重背景、渐变背景、遮罩等方式实现

点击类：通过状态选择器结合层次选择器的方式实现

悬浮类：通过行为选择器结合层次选择器的方式实现

切换类：通过状态选择器结合层次选择器的方式实现

表单类：通过状态选择器互相结合的方式实现

上述CSS效果都是基于我熟悉很多CSS技巧的情况下实现的，所以在实战篇中也为大家准备三个实战大操作，将本课程学习到的全部CSS技巧实行一次糅合与整体应用。相信大家在日后开发中也能使用CSS大展身手。

准备

在进入学习前，先部署相关开发环境。其实对于CSS开发环境的部署还是很简单的，一个浏览器一个编辑器即可。当然这样的部署也只能应付一些简单的Demo，应用级别的部署还需结合webpack实现。

请自行安装以下开发工具。

• 浏览器：Chrome 60+，我选择版本为100
• 编辑器：VSCode 1+，我选择版本为1.68.0
• 运行环境：Node 16+，我选择版本为16.14.0

首先安装Chrome，对于CSS开发环境的要求其实并不高，随便即可，但为了保证一些CSS3与CSS4可在浏览器中正常使用，还是建议选择高版本Chrome，这样体验效果会更佳。注意，不要使用IExplorer。众所周知，IExplorer在2022年6月15日已被微软发表声明放弃了。

然后安装VSCode，安装完毕点击插件按钮，在搜索栏中输入以下Stylelint，点击安装即可。

最后安装Node，安装完毕需搭建应用的webpack构建环境。为了简化这些流程，我开源了一个零配置开箱即用的JS/React/Vue应用自动化构建脚手架@yangzw/bruce-app，真正实现构建代码与业务代码完全分离，无需关注构建过程，专心编写业务代码。你可认为它是一个Webpack Plus(增强版)。

打开CMD工具，执行以下命令安装bruce-app，具体如何使用请查看文档详情。好用的话给我一个Star作为鼓励哈！

npm i -g @yangzw/bruce-app

当然我还是建议大家使用bruce-app体验构建代码与业务代码完全分离的快感。若不想使用，可使用掘金社区的码上掘金在线编码也行。

配置

bruce-app安装完毕，跟随我一起创建本课程的实战应用。

• 执行bruce-app -v查看版本
• 执行bruce-app l切换语言，若你是港澳台同学可切换到繁体中文
• 执行bruce-app i初始应用，选择vue作为开发框架，选择scss作为预设样式，应用名称定义为icss
• 执行cd icss进入应用
• 执行bruce-app b，选择开发环境作为构建环境

为了形成默契，后续每讲述一个示例，都执行bruce-app n创建一个组件。创建完毕打开vue文件，<template>用于编写HTML代码，<style lang="scss">用于编写CSS/Scss代码。

到此本课程所有学前准备都搞掂，接着可愉快地进入学习状态了。

要点

玩转CSS的要诀在于能使用CSS实现的效果都优先使用CSS，学完本课程你就可能明白CSS的奥义在哪里了。

在此分享我学习CSS的秘诀。

• 根据类型将属性分类并记忆
• 根据功能将选择器分类并记忆
• 将效果粒度化：将效果以组件形式拆分，分析其细节是否能由CSS实现，由下往上分析并组装，若每个组件都能由CSS实现，那大体就能由CSS实现
• 放弃JS实现效果的固有化思维：当然有些效果确实不能由CSS实现，但可先从简单的CSS实现效果入手，实在无法实现再改用JS实现
• 多浏览设计类网站：前端不仅只编码，走近设计类网站能让你对产品与用户体验有更多的感悟与灵感

听上去好像很笼统，但大家不要着急，后面会一步一步解构这些秘诀。

总结

为了保障课程内容与在线演示和在线源码的一致性，我将所有与代码相关内容发布到以下位置，大家在学习本课程时请参照以下内容同步学习。

• 在线预览：Here
• 在线演示：Here
• 在线源码：Here