在 Sampa 2024 Front 上介紹 CSS 架構(gòu)的三大支柱讓我有機(jī)會(huì)從理論角度閱讀大量有關(guān) CSS 的內(nèi)容，我覺(jué)得這讓我對(duì) CSS 有了更成熟、全面和戰(zhàn)略性的看法CSS 大規(guī)模開(kāi)發(fā)。

在這次旅行中，我發(fā)現(xiàn)了有關(guān) CSS 的觀點(diǎn)，這些觀點(diǎn)除了重新點(diǎn)燃了我的好奇心之外，還讓我很高興能夠根據(jù)這些新的世界觀做出新的決定。

?

圈復(fù)雜度：CSS 中的邏輯 作者：Harry Roberts

循環(huán)復(fù)雜度是程序復(fù)雜性的度量 - 每個(gè)流程控制和每個(gè)輸出都會(huì)增加方法、類或應(yīng)用程序的復(fù)雜性。

在 CSS 中，復(fù)雜性可能意味著緩慢、可重用性差以及過(guò)于具體的選擇器。

div.sidebar .login-box a.btn span {}

/*
Pode ser lido como

IF (inside .btn)
AND IF (on a)
AND IF (inside .login-box)
AND IF (inside .sidebar)
AND IF (on div)

*/

?

“將您的選擇器視為小程序”

?

鏈接到 CSSWizardry 博客上的英文文章

?

---

?

條件 CSS 作者：Ahmad Shadeed

仍然是關(guān)于將CSS視為一種具有邏輯操作的語(yǔ)言的價(jià)值，不僅僅是談?wù)摳鶕?jù)上下文條件進(jìn)行邏輯評(píng)估以使代碼可用的媒體查詢，而是每個(gè)交互狀態(tài)，下一個(gè)選擇器是否存在，來(lái)自選擇器索引，或來(lái)自特定子項(xiàng)的存在（帶有 :has）。

這是一篇關(guān)于新屬性和由 :has、容器查詢和已經(jīng)存在但尚未深入探索的支持查詢引起的范式轉(zhuǎn)變的文章。

?

鏈接到 Ahmad Shadeed 博客上的英文文章

?

---

?

CSS Cascade 作者：Amelia Wattenberger

Cascade 樣式表，但很常見(jiàn)的是涉及 CSS 編寫方式和順序的 CSS 錯(cuò)誤。在 Amelia Wattenberger 撰寫的這篇精彩的博客文章中，她以簡(jiǎn)單直觀的方式演示了瀑布流的工作原理，并提供了有關(guān)如何考慮 CSS 的見(jiàn)解。

?

鏈接到 Amelia Wattenberger 博客上的英文文章

?

---

?

CSS-in-JS 簡(jiǎn)史：我們?nèi)绾蔚竭_(dá)這里以及我們將走向何方 作者：Dan Ward

我越需要使用 CSS-in-JS，它的缺點(diǎn)就越困擾我，例如包大小、運(yùn)行時(shí)變化以及令人困惑的重用與共置架構(gòu)。使用 CSS 變量，與通過(guò)樣式注入變量相比，更喜歡箭頭函數(shù)變得更加過(guò)時(shí) - 它更簡(jiǎn)單，并且 CSS 可以很好地處理這種類型的范圍。

正是在這篇文章中，我們了解了它存在的原因和方式，并在全文中提到了令人難以置信的鏈接。

?

鏈接到媒體上的英文文章

?

---

?

CSS 和關(guān)鍵路徑作者：Stoyan Stefanov

CSS 是網(wǎng)絡(luò)加載緩慢、未使用和過(guò)多的 CSS、選擇器和操作的最大罪魁禍?zhǔn)?，這些選擇器和操作在交互中會(huì)影響比應(yīng)有的更多節(jié)點(diǎn)，甚至是需要更少開(kāi)銷和更多架構(gòu)的復(fù)雜而緩慢的選擇器。

在本文中，您將了解瀏覽器如何加載、編譯這一關(guān)鍵資產(chǎn)并對(duì)其進(jìn)行優(yōu)先級(jí)排序，以及如何減少最終用戶訪問(wèn)它的路徑。

?

鏈接到 Stoyan Stefanov 博客上的英文文章

閱讀完后，觀看 Harry Roberts 制作的關(guān)于 Frontend United 上 CSS 性能的視頻

?

---

?

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

Ethan Marcotte 根據(jù)建筑組件創(chuàng)造了“響應(yīng)性”一詞，這些組件以某種方式對(duì)其空間的占用做出反應(yīng)，這一瞥見(jiàn)的靈感來(lái)自于 John Alsopp 在 200 年的文本，該文本呼吁建立一個(gè)更自由的網(wǎng)絡(luò)，規(guī)定更少的規(guī)則設(shè)備數(shù)量不斷增加的世界中的用戶已經(jīng)改變了我們編寫界面的方式，也將改變您查看界面的方式。

?

鏈接到 A List Apart 博客上的英文文章

閱讀完后，觀看 Jen Simmons 的這段視頻，以現(xiàn)代的視角看待響應(yīng)能力 - 內(nèi)在布局

?

---

?

關(guān)閉

加載 CSS 的未來(lái) 作者：Jake Archibald

我在 Google 頻道上觀看 HTTP 203 時(shí)認(rèn)識(shí)了 Jake，從那時(shí)起我就一直關(guān)注他的博客。在這篇文章中，他探討了在

的折疊中包含鏈接的可能性。逐步加載“折疊”下方內(nèi)容的樣式。

不知道這是可能的嗎？是的，TIL也是！

?

鏈接到 Jake 博客上的英文文章

?

讀完后，觀看 Chrome for Developers 頻道??上的 HTTP 203 節(jié)目，我從 Jake 和他的客人那里學(xué)到了很多東西

以上是4 篇讓我大吃一驚的 CSS 文章的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！