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

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

?

圈複雜度：CSS 中的邏輯 作者：Harry Roberts

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

在 CSS 中，複雜性可能意味著緩慢、可重複使用性差以及過於具體的選擇器。

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)

*/

?

「將您的選擇器視為小程式」

?

連結(jié)到 CSSWizardry 部落格上的英文文章

?

---

?

條件 CSS 作者：Ahmad Shadeed

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

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

?

連結(jié)到 Ahmad Shadeed 部落格上的英文文章

?

---

?

CSS Cascade 作者：Amelia Wattenberger

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

?

連結(jié)到 Amelia Wattenberger 部落格上的英文文章

?

---

?

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

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

正是在這篇文章中，我們了解了它存在的原因和方式，並在全文中提到了令人難以置信的連結(jié)。

?

連結(jié)到媒體上的英文文章

?

---

?

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

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

在本文中，您將了解瀏覽器如何載入、編譯此關(guān)鍵資產(chǎn)並對(duì)其進(jìn)行優(yōu)先排序，以及如何減少最終使用者存取它的路徑。

?

連結(jié)到 Stoyan Stefanov 部落格上的英文文章

閱讀完後，觀看 Harry Roberts 製作的關(guān)於 Frontend United 上 CSS 效能的影片

?

---

?

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

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

?

連結(jié)到 A List Apart 部落格上的英文文章

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

?

---

?

關(guān)閉

載入 CSS 的未來 作者：Jake Archibald

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

的折疊中包含連結(jié)的可能性。逐步載入「折疊」下方內(nèi)容的樣式。

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

?

連結(jié)到 Jake 部落格上的英文文章

?

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

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