2020 年 CSS 实用指南

过去 10 年，CS​​S 发展迅速。为了及时了解 CSS 的一些新功能，我创建了这份 2020 年 CSS 实用指南。您可以观看视频，或在观看完视频后跳转至下方，查看视频中涵盖的大部分功能（及链接）的列表。

请考虑订阅YouTube 频道！

第 1 部分 - CSS 功能 - 1:06

网格间隙、列、自定义属性、框对齐、@supports、滚动捕捉、剪辑路径、遮罩、vw、vh、vmax、vmin、最小高度：100vh、插入符号颜色：橙色、ch 单位、CSS 角度 - deg()、grad()、rad()、turn()、圆锥（锥体）渐变

第 2 部分 - CSS 框架 - 7:48

Tailwind
Bootstrap
Tachyons
Pure
Foundation
Materialize
Sematic-UI
Bulma
UIKit

第 3 部分 - CSS 未来功能 - 9:45

Houdini - 完全控制 CSS 的自定义布局 / 渲染
Focus-within - 用于在元素内聚焦的可访问性修复
prefers-* - 根据用户的设备偏好调整 UI/UX
逻辑属性 - Block-start、block-end、inline-start、inline-end
Position Sticky - 将 UI 保持在视口内
Backrop-filter - 元素后面的样式调整
:is() - 结合 any() 和 mathes()
CSS 子网格
CSS 区域
CSS 模块
Display:outer inner
size: wh,aspect-ratio
自定义元素 -
#RRGGBBAA - 在 8 位“十六进制”模式下指定 alpha
“全部”属性 - 重置元素上的所有属性
font-variant: small-caps;
image-set() - 根据分辨率指定图像源
lab()、gray()、lch()、hwb() - 新的颜色模式
calc() min() max() clip() sin() cos() - 以及更多数学函数

第4部分-CSS预处理器-14:34

SASS
LESS
Stylus
PostCSS

第 5 部分 - CSS 样式指南 - 16:00

BEM
Atomic CSS
OOCSS
Suite CSS

JS 中的 CSS -
样式化组件
CSS 模块
样式化 JSX
情感
JSS
魅力
镭
阿芙罗狄蒂

第6部分-CSS资源-17:37

CSS 技巧
Smashing Magazine
CoDrops
A List Apart
Mozilla 开发者网络
Codepen
FreeCodeCamp
Scrimba
CanIUse
Frontend Masters
Pluralsight
Lynda
Syntax（播客）
Shop Talk Show（播客）
Dev.to
DevTubers

我没有介绍很多新事物，但这已经相当大了，可以为你涉足一些新的 CSS 和 Web 技术提供一个很好的起点！

你最想学习哪些功能？

你的愿望清单上有哪些 CSS 功能？