萨沙·格雷夫 公开想知道 CSS 是否变得太大了。 随着过去几年浏览器中出现的所有好东西—— 容器查询! 相对颜色句法! 级联层! 逻辑属性! 媒体查询中的范围! 个体变换! :has() 选择器！ — 以及所有可能发生的事情 — CSS 切换! 嵌套! 颜色混合! 滚动链接动画! 作用域样式！ — 如今，对于新手和经验丰富的前端开发者来说，CSS 的学习曲线肯定是不同的。
可能曾经有一段时间可以了解大多数 CSS 属性及其工作原理。 那些日子早已一去不复返了，至少对于像我这样的老手来说是这样。 但这有点引出了一个问题： 你绝对必须知道什么 CSS？
Vincas Stonys 最近 尝试了一份清单. 克里斯 把一个放在一起 基于自 CSS3 以来发布的功能。 您可能知道您将在列表中包含什么。 如果我必须将前 5 名放在一起并将自己限制在属性和选择器上，它可能看起来像这样......
writing-mode
我不能说足够的 writing-mode 财产。 它之所以重要——尤其是从学习的角度来看——是因为它为你设置了包容性原则，这些原则可以解释制作布局，而不管用户的语言是什么。 很好的理解 writing-mode 将导致对 逻辑属性和值，而这些反过来又为理解文档流程和思考奠定了基础 block, inline, start及 end 而不是物理方向。
display
我很难相信任何人都可以在没有扎实掌握 CSS 的情况下写出好的 CSS display 财产。 它既是一个属性，也是一个用于创建布局的框架。 没有它就没有 Flexbox 或 CSS Grid，这使它有点像理解这些重要特性的看门人。
另外， display 财产完美互补 writing-mode. 这正是您一次需要的 writing-mode 向您展示了文档流和逻辑方向。 您将需要一个属性来改变元素的正常流（例如将块元素更改为内联元素）或开始布局（例如创建灵活的布局上下文），这就是 display 进场。
margin / padding / border
呃，我完全是在作弊，但想想学习 margin, padding及 border 在一起是不可避免的。 它们都是 盒子模型，都有助于间距和样式，都需要熟悉 CSS 长度单位. 了解这些属性的设计目的以及它们如何影响元素的计算大小，肯定会给你更多的样式控制，并消除关于元素为什么是它的大小的任何困惑——一个常见的 CSS 头痛！
::before 和 ::after
另一个我在作弊的地方。 是的， ::before 和 ::after 是两个单独的伪元素，但同样，我无法想象在没有另一个的情况下学习一个。 这是一个二分法！
我记得当我得知这些存在并且可以用来创造一切时，我是多么激动 炫酷的界面效果 去完成 single-div 插图. 它开辟了新的可能性，并提供了对 CSS 真正强大功能的初步了解。
@media
哎呀，我已经到了列表中的第五个也是最后一个项目，感觉这里还有很多 CSS 优点。 但如果我必须选择最后一件事，那就是 媒体查询. 为什么？ 因为它是创建流畅、灵活的布局和不同的查看环境的主要成分。 容器查询 随着它的成熟，可能最终会把它从我的列表中剔除，但就目前而言， @media 是响应式设计的一本很好的入门书。
除此之外， @media 是了解 CSS 条件特性的良好第一步。 我们是否正在根据正在使用的设备类型编写查询（例如， screen or print) 或当浏览器的视口满足特定条件时（例如， width >= 768px），则 @media 语法对于创建针对不同条件优化的布局非常有用。
哦，我们甚至还没有谈到如何 @media 与可访问性有关，这要归功于它的能力 根据用户的喜好应用样式 （例如， prefers-reduced-motion). 因此，除了制作条件布局之外，媒体查询是理解包容性设计的一个很好的下一步。
荣誉提名
将 CSS 提炼成一个包含五个必须知道的属性和选择器的列表是困难的，尤其是现在的 CSS 现在甚至比五年前更强大。 我真的很想包括许多其他项目，例如（排名不分先后）：
calc()has()colorfontoverflowposition（尤其是这个）z-index
但我坚持我的选择。 学习 CSS 比记住属性列表更重要。 这是一段旅程，我认为我选择的这五本书开辟了一条不错的小学习路径，为编写良好的样式规则和深入研究 CSS 的后续步骤奠定了基础。
好吧，告诉我你的！
不同意我的清单？你应该！我敢打赌你一定有一些聪明的意见，我想看看你如何才能进入前 5 名名单。
