01 准备篇：学前准备

前言

Hello，我是 JowayYoung。首次写书，希望能给各位同学带来惊喜，能让各位同学爱上 CSS。

本小册分为 准备篇 、 基础篇 、 进阶篇 、 技巧篇 、 实战篇 、 总结篇 六大块总共 16章 ，从 0 到 1 拥有一个完整的 CSS 知识体系，外加玩转 CSS 神操作骚技巧。本小册主要以 开发技巧 作为驱动点，让 CSS 创造出更多意想不到的事情，通过 概念、技巧、场景三合一 的方式实现一些看似只能由 JS 才能实现的效果。

本小册以 CSS 神操作骚技巧 作为核心内容，集齐 CSS 的 基础+原理+进阶+技巧+实战 ，希望通过多种方式强化各位同学对 CSS 知识体系 和 CSS 神操作骚技巧 的吸收，帮助各位同学得心应手玩转 CSS。

主题

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

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

作为程序猿的我们，编码同样也需大量的写作技巧。一份良好的代码能让人耳目一新，让人容易理解，让人舒服自然，同时也让自己成就感满满 (哈哈，这个才是重点)。

本小册以 CSS 神操作骚技巧 作为核心内容，通过多个章节剖析 CSS 的艺术之美。很多同学都觉得 CSS 简单，但是简单也能玩出很多新花样。

相信喜欢 CSS 的同学应该都看过笔者在 2019 年发表的 《灵活运用 CSS 开发技巧》 一文，到目前为止在掘金社区里有 4000+ 点赞量和 12万+ 阅读量，让笔者也相信其实还是有很多同学对 CSS 神操作骚技巧 很感兴趣的，本小册就带领各位同学从 0 到 1 玩转 CSS。

若还没看过 《灵活运用 CSS 开发技巧》 一文，可先来预览一些纯 CSS 实现一些看似只能由 JS 才能实现的效果。

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

   

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

   

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

   

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

   

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

   

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

   

上述纯 CSS 效果都是基于笔者很熟悉大部分 CSS 开发技巧的情况下实现的，所以在最后的实战篇也为各位同学准备三个实战大操作，通过本小册学习到的全部 CSS 开发技巧实行一次糅合和整体应用。相信各位同学在日后的项目中也能用 CSS 大展身手。

准备

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

以下就一步一步部署 CSS 开发环境。万事开头都要有准备，不要觉得一切简单而去忽略。细节从我做起，笔者的座右铭 认真做好每一份细节，用心写好每一段代码，让笔者对细节把握更好。

• 浏览器：Chrome 60+，笔者选择版本为 85
• 编辑器：VSCode 1+，笔者选择版本为 1.48.0
• 运行环境：Node 12+，笔者选择版本为 12.18.0

1. 首先安装 Chrome ，对于 CSS 开发环境的要求其实并不高，随便即可，但是为了保证一些 CSS3 和 CSS4 可在浏览器中正常使用，还是建议选择 高版本 Chrome，这样体验效果会更佳。注意，不要使用IExplorer ，众所周知，其 CSS 兼容性比较差，即使现在已到 2020 年，还是有部分 CSS3 无法在 IExplorer 上正常使用，更何况是 CSS4 了。

2. 然后安装 VSCode ，安装完成后配置 VSCode 。因为本小册是一本几乎纯讲 CSS 的书，所以先安装几个 CSS 插件。在后续开发过程中，笔者会详细讲解这些插件如何配置和使用，所以麻烦各位同学提前安装上。

3. 点击红框的 插件按钮 ，在蓝框的 搜索栏 里输入以下插件名称，点击安装即可。

   

   • Caniuse：查看 CSS 兼容性
   • CSScomb：排序 CSS 属性

4. 最后安装 Node ，安装完成后需搭建项目的 Webpack 构建环境。为了简化这些流程，笔者曾经开源过一个零配置开箱即用的 React/Vue 应用自动化构建脚手架 bruce-cli ，可认为是一个 Webpack Plus (增强版)，它可做到完全分离构建代码和业务代码，让前端开发者只需专注于业务代码的编写。

5. 打开 CMD，执行 npm i -g bruce-cli 安装 bruce-cli ，若安装不上，请按照以下步骤执行。

   • 切换 NPM 镜像 为淘宝镜像： npm config set registry https://registry.npm.taobao.org/
   • 切换 Node 镜像 为淘宝镜像： npm config set disturl https://npm.taobao.org/mirrors/node/
   • 重新执行安装命令： npm i -g bruce-cli

   bruce-cli

   若对 bruce-cli 感兴趣，请戳 这里 查看详情，喜欢的可给笔者一个 Star 作为鼓励吗？

   

若各位同学可自行搭建项目的 Webpack 构建环境也是一个不错的选择，那可选择使用你搭建的构建代码运行本小册的项目。在此笔者就不啰嗦如何搭建 Webpack 配置了，相信各位同学都是一位厉害的 Webpack 配置工程师了。

当然笔者还是建议各位同学使用 bruce-cli 体验构建代码和业务代码完全分离的快感。若懒得搭建，使用 @vue/cli 也行。

配置

安装完 bruce-cli 后，请跟随笔者一起创建本小册项目。

• 执行 bruce -v 查看 bruce-cli 的版本，笔者使用的版本都是 最新版本
• 若你是港澳台的同学，可执行 bruce l 选择面板语言并切换到繁体中文，另外还提供英文切换
• 找一个用来存储本小册项目的位置，例如桌面，执行 bruce i ，按照以下选择即可创建一个完整的项目目录，本项目选择 vue 作为开发框架，选择 scss 作为样式预处理
• 执行 cd icss 进入本项目
• 执行 bruce b ，按照以下选择即可构建本项目，构建环境记得选择 开发环境 ，为了让代码规范化还得选择校验 CSS 和 JS
• 为了形成默契，后续每讲解一个案例，都执行 bruce n 创建一个组件，笔者也不再啰嗦提醒你们创建组件了，创建完成后打开 vue文件 ， <template> 用来记录 HTML代码 ， <style lang="scss"> 用来记录 CSS/SCSS代码

到此为止，本小册所有的学前准备都搞掂了，接下来即可愉快地进入学习状态了。

注意

bruce-cli 默认安装最新版本的 vue，若安装的版本是 3.x，请把版本降级到 2.x

要点

玩转 CSS 的要诀在于 能使用 CSS 实现的效果都优先使用 CSS ，各位同学在学完本小册后也许就会明白 CSS 的奥义在哪里了。

在此分享一下笔者学习 CSS 的秘诀。

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

听上去好像很笼统，但是各位同学不要着急，后面会一步一步解构这些秘诀。

题外话

上述提到的 bruce-cli 是为了简化所有的项目初始化流程而开发出来的，它可承包 初始项目、 构建项目、 打包项目 和 发布项目 等项目开发流程，目前也还一直在完善和迭代中，真正实现了前端项目的构建代码和业务代码的完全分离。妥妥的 建筑承包商，哈哈！

极简的项目目录结构让你很舒心地编写业务代码，完全不用去理会那些构建代码。通过 bruce-cli 创建出来的项目是不包含任何构建配置的 (什么 Postcss、Babel 等配置通通都没有)，这些配置都是集成在 bruce-cli 里，可通过项目中的 brucerc.js 修改 bruce-cli 的默认配置。

目前笔者负责的项目中有 50 多个项目是由 bruce-cli 构建，若对 bruce-cli 感兴趣，请戳 这里 查看详情，喜欢的可给笔者一个 Star 作为鼓励吗？若有任何疑问，欢迎添加笔者微信 YangzwVIP 与笔者详谈，感谢支持。

传送门

为了统一小册内容与 在线演示 和 在线源码 的一致性，笔者将所有与代码相关的内容发布到以下位置，各位同学在学习小册的过程中请参照以下内容同步学习。

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