咱们好，这里是咱们的林语冰。坚持阅览，自律打卡，每天一次，前进一点。
免责声明
本文属所以语冰的直男翻译了属所以，略有修改，仅供粉丝参阅。英文原味版请传送 Writing CSS In 2023: Is It Any Different Than A Few Years Ago?。
本期同享的是 —— CSS 的发展速度比以往都快。自从几年前有了 Flexbox 和 Grid 以来，跟着一切现在可用的和即将推出的新功用，咱们编写 CSS 的方法也在与时俱进。本文同享了了哪些功用对当时的 CSS 写法影响最大，以及哪些功用没有。
CSS 一切花里胡哨的粗野成长真的改变了咱们编写 CSS 的方法吗？新功用无疑改变了自己今日编写 CSS 的方法，但没有彻底改变。
我记得当 SCSS 开端蚕食 CSS 时，它常常被用作代码示例的首选语法。我并没有看到相同的有机选用发生在原生 CSS 的逻辑特点上，由于大部分 CSS 爱好者并不知道这些新功用，而咱们已经为它们供给了全面的浏览器支撑已有大约两年了。
就自己而言，CSS 的演化让我非常鸡冻。一大坨最新功用都是咱们多年来梦寐以求的，这足以让我现在比以往任何时候都更喜爱编写 CSS。
容器查询
自己郑重声明：我从不喜爱为呼应式布局编写媒体查询。内容对视口宽度的呼应不同，具体取决于其所在的组件。平衡一个组件中的内容一直是一种与平衡其他组件中的内容的整活行为，在看似任意的断点处增加了一堆媒体查询。运用 SCSS 将媒体查询嵌套在挑选器中已经勉为其难，但也仅仅差强人意。
容器查询对我而言是正确的挑选。现在，咱们可以将子元素的规模限定为父容器，并依靠容器的巨细来界说布局的移动方位，而无需考虑其他周围的组件。
.parent {
container-type: inline-size;
}
/* 容器查询 */
@container (min-width: 600px) {
.child {
align-self: center;
}
}
我仍运用媒体查询来完成呼应式布局，但倾向于将它们保留用于由组装容器组成的更大布局。当不需求考虑每个单独容器内发生的状况时，断点更可猜测，这实际上可以更明确地针对特定设备。
图层款式组
我喜爱图层这种办理级联款式的方案！现在，假如我有一个重置或来自框架的某些第三方 CSS，我可以将它们包装在级联层中，并将它们放在文件底部，这样我自己的款式就位于前面和中间。
浏览器已经开端支撑级联层，所以兼容性不是大问题。更重要的是，我在项目上仍依赖 SCSS 来取得某些功用，并且在部分文件中保护款式对我而言感觉良好，至少关于此类工作而言是如此。
body {
display: grid;
gap: 3rem;
place-items: center;
}
/* 级联层 */
@layer base {
body {
font-size: 1.25rem;
line-height: 1.35;
padding: 3rem;
}
}
:is()/:where()
我必定会寻求 is()/:where 这些较新的联系伪类挑选器，但并不是真实为了依据联系按条件地挑选元素的好处。
相反，我最常运用它们来办理特异性。为什么？由于关于 :is()，特异性不是由主挑选器决议的，而是由其参数列表中最具体的挑选器决议的。
/* 特异性权重: 0 1 1 */
:is(ol, .list, ul) li {
}
/* 特异性权重: 0 0 2 */
ol li {
}
.list 挑选器为第一个规矩集供给了更高的特异性权重，这意味着，它优先于第二个规矩集，即便第一个规矩集在级联中更高。
另一方面，:where() 的特异性得分为 0，因而它不会增加其所在挑选器的整体得分。它的参数列表中的内容底子无关痛痒。出于相同的原因，我运用 :is() 来添加特异性，我运用 :where() 将其删去。我喜爱保持较低的特异性，由于我仍期望级联以尽少的摩擦操作，而 :where() 使这成为可能，尤其是在界说大局款式时。
举个栗子，将 :not() 包裹在 :where() 内，防止 :not() 前进特异性：
/* 特异性权重: 0 0 0 */
:where(:not(.some-element)) {
}
我仍是 BEM 语法的虔信徒之一。但命名是最头大的工作之一。我常常发现没有足够的称号来辅佐描述元素的功用及其与周围元素的联系。:is()/:where() 的特异性争辩才能意味着，我可以更少地依赖杂乱的类名，而更多地依赖元素挑选器。
新式色彩函数语法
rgb() 和 hsl() 等色彩函数的更新语法（以及不断发展的 oklch() 和 oklab()）并没有得到太多重视，但它的确可以更好地界说色彩值。
其一，当我需求 alpha 值时，我永久不用触及 rgba() 或 hsla() 。事实上，不管我是否需求 alpha，我总是运用这些版别，由于我不想费心决议运用哪个版别。
color: hsl(50deg, 100%, 50%);
/* 等效 */
color: hsla(50deg, 100%, 50% / 1);
这里编写额定的 a、/ 和 1 是值得的，由于不用考虑运用哪个函数。
但更新后的色彩语法不关心函数称号中额定的 a。它甚至不关心逗号。
color: hsl(50deg 100% 50% / 0.5);
我非常鸡冻地开端运用更新的 oklch() 和 oklab() 色彩空间，由于它们具有完好的浏览器支撑！
界说调色板
自从选用 SCSS 以来，我一直运用变量来界说和分配色彩，且当 CSS 自界说特点出现时，我感到非常鸡冻。在将调色板中的色彩传递给具有更多功用称号的变量之前，我会为它们指定通用称号。
/* 调色板 */
--red: #ff0000;
/* 色彩类型 */
--color-primary: var(--red);
我仍然这样做，但现在我将在具有大调色板的项目上运用色彩函数进一步笼统事物：
:root {
/* 主色彩 HSL */
--h: 21deg;
--s: 100%;
--l: 50%;
--color-primary: hsl(var(--h) var(--s) var(--l) / 1);
}
.bg-color {
background: var(--color-primary);
}
.bg-color--secondary {
--h: 56deg;
background: hsl(var(--h) var(--s) var(--l) / 1);
}
这种调色板是不是有点太笼统了？或许是的。但关于那些可能有十种不同色彩的项目来说，拥有这种级别的细粒度操控来操纵它们乃一大幸事。或许我还没有探究过 color-mix() 的更多操控。
我没用的功用
我想我写 CSS 的方法和以前有点不一样了！这可能与我没有运用的一大坨其他新功用有关。我正在运用的新功用数量比我没有运用的功用数量要少得多，不管是由于浏览器支撑，还是由于我还没有接触到它。
CSS 嵌套:我真的很期待 CSS 嵌套，由于这可能是我彻底弃用 SCSS，而彻底拥抱纯 CSS 的转折点。在撰写本文时，它正在等候 Firefox 支撑，因而它可能近在咫尺。
款式查询：依据其他元素的款式将款式应用于元素是我真实感兴趣的工作。或许跟着它们取得浏览器支撑，这种状况将会改变。
has()：当 Firefox 支撑时，我必定会运用它。在那之前，我只会小试牛刀，并欣赏他者怎么运用它。尽管没有彻底支撑，:has() 并没有改变我编写 CSS 的方法。不过，我期望它可以改变，由于可以依据其包含的子元素挑选父元素怎么可能是一件坏事，对不？
动态视口单位：自从动态视口单位在 2022 取得广泛支撑以来，我就开端在款式中加入它们。因而，我不再运用 height: 100vh，而是开端越来越多地编写 height: 100dvh。我想这影响了我编写 CSS 的方法，即便它很微妙。
OKLCH/OKLAB 色彩空间：oklch() 肯定是我的首选色彩函数。它在去年取得广泛支撑，我言语它会成为 CSS 中界说色彩的最广泛运用的方法。
其他功用:过去五年发布的每一个新 CSS 功用都一言难尽。当谈到我在日常工作中没有运用哪些功用时，首要的主题是它们太新，或许缺少浏览器支撑。这并不意味着，我不会运用它们，但目前我仅仅悄悄重视它们，或许享用沉浸式体验它们的乐趣。
这些功用包含但不限于：
- 三角函数
- 锚点方位
- 翻滚链接动画
initial-letter<selectmenu>/<popover>- 视图过渡
- 效果域款式
本期话题是 —— 你最常用的 CSS 新功用是什么呢？你未来会弃用 SCSS/LESS 吗？
欢迎在本文下方群聊自由言论，文明同享。谢谢咱们的点赞，掰掰~
《前端 9 点半》每日更新，坚持阅览，自律打卡，每天一次，前进一点。
