轉載說明：原創不易，未經授權，謝絕任何形式的轉載
當我遇到一個新産品時，我首先想到的是他們如何實作CSS。當我遇到Meta的Threads時也不例外。我很快就探索了移動應用程式，并注意到我可以在網頁上預覽公共文章。
這為我提供了一個深入挖掘的機會。我發現了一些有趣的發現，我将在本文中讨論。
讓我們深入了解吧！
使用CSS Grid進行文章布局
在生産應用程式中，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的另一個原因可能是将頭像下移并使其更接近線條。
對網格行使用奇數值
奇數值作為網格行的高度是出于什麼考慮？經過進一步檢查，似乎是對使用者界面進行微調的一種方式。行高的總和為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;
} 方式一：預設
.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應用程式中的線條。我對它的構造方式感到好奇，因為幾周前我曾寫過一個類似的主題。
請參見下圖：
連接配接我的頭像和馬克的頭像的那條線是一條 SVG 路徑。它由三部分組成。
第一部分的長度是用 JavaScript 計算的。
網格的内聯CSS變量
我很高興看到像Threads這樣的大型應用程式正在使用我和許多其他人提倡的東西。
在使用者個人資料中，頁籤網格布局是使用包含頁籤數的内聯CSS變量建構的。
很有用。當選項卡數量增加時，我們隻需要更改CSS變量的值。很簡潔，對吧？
溢出換行
我注意到在文章正文中使用了overflow-wrap: anywhere。我以前沒有使用過或聽說過這個關鍵詞。我使用break-word。
根據MDN的說法，它與break-word相同，但有一個額外的東西：
計算最小内容内在大小時，考慮了單詞折斷引入的軟換行機會。
我仍然沒有發現使用break-word和anywhere之間的差別。如果Threads團隊中有任何人正在閱讀這篇文章，我非常好奇為什麼。
動态視口機關的使用
我喜歡在啟動畫面中使用動态視口機關dvh。
防禦性的CSS政策
為了確定flexbox布局不會因為最小内容長度而破裂，使用min-width: 0來重置該行為。
結論
今天就到這裡。我喜歡檢查CSS并了解Threads團隊如何建構産品。我相信還有很多東西我沒有注意到，因為這隻是Web上的預覽版本。
由于文章内容篇幅有限，今天的内容就分享到這裡，文章結尾，我想提醒您，文章的創作不易，如果您喜歡我的分享，請别忘了點贊和轉發，讓更多有需要的人看到。同時，如果您想擷取更多前端技術的知識，歡迎關注我，您的支援将是我分享最大的動力。我會持續輸出更多内容，敬請期待。