Sacha Greif 公开质疑 CSS 是否变得，你知道，太庞大了。在过去几年中，浏览器中发布了所有这些好东西——容器查询！相对颜色语法！层叠上下文！逻辑属性！媒体查询中的范围！单个变换！:has() 选择器！——以及所有可能出现在地平线上的东西——CSS 切换！嵌套！颜色混合！滚动关联动画！作用域样式！——对于新手和经验丰富的前端开发人员来说，如今 CSS 的学习曲线肯定有所不同。
可能曾经有过一个时期，可以了解大多数 CSS 属性及其工作原理。那些日子早已一去不复返了，至少对我这个老手来说是这样。但这引发了一个问题：**你绝对必须掌握哪些 CSS？**
Vincas Stonys 最近 尝试了一个列表。Chris 根据自 CSS3 发布的功能整理了一个列表。你可能已经对你会在列表中包含什么内容有所了解。如果我必须整理一个前 5 名的列表，并且将自己限制在属性和选择器上，它可能看起来像这样……
writing-mode
我无法充分表达我对 writing-mode 属性的喜爱。使其变得重要的原因——特别是在学习方面——是它为你建立了包容性原则，这些原则考虑了布局的构建，无论用户的语言如何。对 writing-mode 的良好理解将导致对 逻辑属性和值 的理解，而这些属性反过来为理解文档流并从 block、inline、start 和 end 的角度而不是物理方向的角度进行思考奠定了基础。
display
我很难相信有人可以在没有牢固掌握 display 属性的情况下编写良好的 CSS。它既是一个属性，也是一个创建布局的框架。如果没有它，就不会有 Flexbox 或 CSS Grid，这使得它有点像理解这些重要功能的门卫。
此外，display 属性完美地补充了 writing-mode。一旦 writing-mode 使你了解了文档流和逻辑方向，它正是你所需要的。你需要一个属性来更改元素的正常流（例如，将块级元素更改为内联元素）或开始布局（例如，创建灵活的布局上下文），而这就是 display 发挥作用的地方。
margin / padding / border
哎呀，我在这里完全作弊了，但认为将 margin、padding 和 border 放在一起学习是不可避免的。它们都是 盒模型 的一部分，都有助于间距和样式设置，并且都需要熟悉 CSS 长度单位。了解这些属性的设计目的以及它们如何影响元素的计算大小，当然可以让你拥有更多的样式控制权，并消除关于元素为何具有其大小的任何困惑——一个常见的 CSS 难题！
::before 和 ::after
另一个我有点作弊的地方。是的，::before 和 ::after 是两个单独的伪元素，但同样，我无法想象学习其中一个而不学习另一个。这是一个双胞胎！
我记得当我第一次了解到它们的存在并且可以用来创建从 酷炫的 UI 效果 到完整的 单个 div 图形 的一切时，我有多么震惊。它打开了新的可能性，并让你第一次了解 CSS 的强大功能。
@media
哦，我已经到了列表中的第五个也是最后一个项目，并且感觉还有很多 CSS 优点应该在这里。但是如果我必须选择最后一件事，那就是 媒体查询。为什么？因为它是在创建流畅、灵活的布局和不同查看上下文的关键要素。随着 容器查询 的成熟，它可能会从我的列表中取代它，但就目前而言，@media 是响应式设计的绝佳入门。
除此之外，@media 是进入 CSS 条件特性的一个不错的第一步。无论我们是根据正在使用的设备类型（例如，screen 或 print）编写查询，还是在浏览器的视口满足某个条件时编写查询（例如，width >= 768px），@media 语法对于创建针对不同条件进行优化的布局都非常有用。
哦，我们甚至还没有触及 @media 如何与可访问性相关联，这要归功于它能够 根据用户的偏好应用样式（例如，prefers-reduced-motion）。因此，除了创建条件布局之外，媒体查询也是迈向理解包容性设计的一个不错的下一步。
值得一提
将 CSS 归纳为五个必须掌握的属性和选择器的列表是一件困难的事情，尤其是在如今的 CSS 比，比如说，即使是五年前也更加强大的情况下。还有许多其他项目我真的很想包含在内，例如（无特定顺序）
calc()has()colorfontoverflowposition（尤其如此）z-index
但我坚持我的选择。学习 CSS 比记住属性列表更重要。这是一个旅程，我认为我选择的五个项目开辟了一条不错的学习路径，为编写良好的样式规则以及深入学习 CSS 的后续步骤奠定了基础。
好的，告诉我你的想法！
不同意我的列表？你应该这样做！我敢打赌你有一些聪明的想法，我想看看你会如何完善前 5 名的列表。
除了
display之外，我还想加上align-itemsjustify-contentgap这些与
display:flex结合使用，可以帮助在可预测的网格中对齐项目并进行间距，而无需依赖任何复杂的边距、使用负边距的包装器等。对我来说，CSS 自定义属性（变量）也很重要。
很棒的列表，Geoff！感谢你的提及。
我认为 pointer-events、user-select 和 cursor 也很重要
此外，当你开始处理大型项目时，你应该开始了解专注于性能的指令（contain、content-visibility 和 will-change）
逻辑属性
https://webdev.ac.cn/learn/css/logical-properties/
clamp(min, calc(some..magic..formula), max)
在 CSS 中使用 JS，而不是在 JS 中使用 CSS
如何实现？通过 JavaScript 动态更改 CSS 变量
document.documentElement.style.setProperty('--var-name', value);flex 属性：align-items、justify-content、gap（正如 Rob 已经提到的）通过媒体查询进行修改
hsl() 和 hsla()，但我真的很想开始用新的颜色格式替换它们，这些格式针对人眼进行了优化，例如：hwb()、lab() 和 lch()（也许还有 HSLuv？？）
永远都在列表中的：box-sizing: border-box