当我遇到新产品时，首先想到的事情之一就是他们如何实现 CSS。当我遇到 Threads by Meta 时，情况也不例外。我快速浏览了移动应用程序，发现我可以在网络上预览公开帖子。

这为我提供了一个深入挖掘的机会。我发现了一些有趣的东西，我将在本文中讨论它们。

让我们开始吧！

使用 CSS 网格进行帖子布局

在生产应用中，CSS Grid 最值得注意的用例之一是在 Threads 中。CSS Grid 用于构建帖子布局。

看一看：

:root {  --barcelona-threadline-column-width: 48px;}.post {  display: grid;  grid-template-columns:    var(--barcelona-threadline-column-width)    minmax(0, 1fr);  grid-template-rows: 21px 19px max-content max-content;}

有趣的事实：第一个网格列名为--barcelona。我很好奇这个选择背后的原因。

帖子布局由 2 列 * 4 行网格组成。没有主容器；帖子中的每个项目都使用grid-column和grid-row属性手动放置。

用户头像

.post-avatar {  padding-top: 4px;  grid-row: 1 / span 2;  grid-column: 1;}

头像位于第一列，横跨前两行。值得注意的是 的存在padding-top。虽然我在生产代码中找不到具体原因，但它似乎在微调 UI 对齐。

以下是接受和未接受治疗的化身的治疗前后对比padding-top：

此处应用的另一个原因padding-top可能是将头像一直向下推并使其更靠近线。

对网格行使用奇数值

为什么要用21px和19px作为行值呢？仔细研究之后，发现这似乎是一种针对 UI 的微调。行高之和为40px，等于头像高度加上padding-top（36px + 4px）。

您可能想知道为什么这些值没有标准化。设计系统通常与这样的信念有关：设计师必须严格遵循 UI 元素的预定义规则。

但是，此示例表明，使用手动调整的值是可以接受的。在某些情况下，偏离严格的指导方针是可以的。

使用固定大小行的限制

由于前两行的宽度是固定的，因此无法为其添加填充。不过，只要您意识到这个限制，就可以使用边距来解决这个问题。

以下是一个例子：

由于行大小固定，添加顶部和底部填充不会影响帖子标题。

布局列之间的空间感觉有点不协调

布局列之间的当前间隙为零。相反，图像的大小为36*36像素，而其容器的48宽度为像素。

这模仿了此处的间距。我不知道团队为何选择这样做，但我更愿意使用它gap。

为什么不使用命名的 CSS 网格区域？

根据我目前的观察，网格布局有三种变化，所有这些变化都可以通过使用命名网格区域而受益。

我尝试复制网格并根据命名区域构建它。看起来比为列和行指定值更容易扫描。

为了证明这一点，让我们grid-area为布局中的每个项目分配一个：

.AvatarContainer {  grid-area: avatar;}.HeaderContainer {  grid-area: header;}.BodyContainer {  grid-area: body;}.ThreadlineContainer {  grid-area: line;}.FooterContainer {  grid-area: footer;}

变体 1：默认

然后，我们可以开始进行变化。这是默认布局：

.post {  display: grid;  grid-template-columns:    var(--barcelona-threadline-column-width)    minmax(0, 1fr);  grid-template-rows: 21px 19px max-content max-content;  grid-template-areas:    "avatar header"    "avatar body"    ". body"    ". footer";}

注意使用 来.表示空白处。

变化 2：答复

变化是指当一个人回复另一个人时。

.post--reply {  grid-template-rows: 36px 0 max-content max-content;  grid-template-areas:    "avatar header"    "body body"    "body body"    "footer footer";}

变化 3：默认使用线

.post--withLine {  grid-template-areas:    "avatar header"    "avatar body"    "line body"    "footer footer";}

在这里使用命名的网格区域使得仅在一个地方进行编辑就可以更改布局。

SVG 用于螺纹线

说实话，Threads 应用中最先引起我注意的是漩涡线。我很好奇它是如何构造的，因为我几周前曾写过类似的主题。

参见下图：

连接我的头像和 Mark 头像的那条线是 SVG 路径。它由三部分组成。

第一部分的长度是用JavaScript计算的。

CSS 网格的内联 CSS 变量

我很高兴看到我和许多其他人所提倡的东西正在像 Threads 这样的大型应用程序上使用。

在用户配置文件中，选项卡网格布局是使用包含选项卡数量的内联 CSS 变量构建的。

这很有用。当标签数量增加时，我们只需要更改 CSS 变量的值。简洁吧？

溢出包装

我注意到帖子正文中使用了overflow-wrap: anywhere。我之前没有使用过或听说过该关键字。我使用break-word。

按照MDN的说法，它与 相同break-word，但还有一点额外的东西：

在计算最小内容固有大小时，会考虑由单词中断引入的软换行机会。

break-word使用vs时我仍然没有发现任何差异anywhere。我很好奇为什么，如果有 Threads 团队的人正在阅读这篇文章。

动态视口单元的使用

dvh我喜欢在启动画面中使用动态视口单元。

如果您想了解更多，我写了一篇关于新视口单位的详细文章。

防御性 CSS 策略

为了确保 flexbox 布局不会因为最小内容长度而中断，min-width: 0用于重置该行为。

在我的防御性 CSS 帖子中了解有关 flexbox 中最小内容大小的更多信息。

结论

今天就到这里。我很高兴检查 CSS 并了解 Threads 团队如何构建产品。我确信有很多事情我没有注意到，因为这是网络上的预览版本。

作者:Ahmad，来自巴勒斯坦的独立产品设计师和前端开发人员。

出处
:https://ishadeed.com/article/threads-app-css/