CSS網(wǎng)格，子網(wǎng)格和容器查詢現(xiàn)在是主流，基於容器尺寸而不是視口啟用響應(yīng)式的模塊化設(shè)計； 2。天然CSS嵌套得到廣泛支持，從而降低了對預(yù)處理器的依賴並提高可維護(hù)性； 3。公用事業(yè)領(lǐng)先的CSS（例如，尾風(fēng)）仍然占主導(dǎo)地位，但正在以JIT，任意價值和將實用程序與自定義組件相結(jié)合的JIT，任意價值和混合方法發(fā)展； 4。 CSS自定義屬性是設(shè)計系統(tǒng)的核心，通過prefers-color-scheme和javaScript集成實現(xiàn)動態(tài)主題，暗模式和可訪問性； 5。績效意識正在提高，未使用的CSS檢測，通過@Scope提高效率來提高效率的CSS檢測，關(guān)鍵的內(nèi)部，代碼分類和範(fàn)圍範(fàn)圍的樣式； 6.像SASS這樣的預(yù)處理程序隨著本機(jī)CSS功能的趕上而下降，儘管它們堅持在傳統(tǒng)企業(yè)環(huán)境中。總體而言，CSS在2024年是一種成熟，強(qiáng)大的語言，可以包含模塊化，性能和開發(fā)人員的經(jīng)驗，而無需框架或構(gòu)建步驟。

2024年將CSS鞏固為一種比以往任何時候都更強(qiáng)大，更有能力的語言，而不僅僅是一種樣式工具，而是現(xiàn)代Web開發(fā)工作流的成熟部分。隨著瀏覽器中的新功能運(yùn)輸，更好的開發(fā)人員工具以及對現(xiàn)代方法的採用越來越多，CSS狀態(tài)反映了一個成熟的生態(tài)系統(tǒng)，可以平衡創(chuàng)新與實用性。

這是今年的關(guān)鍵趨勢，工具和塑造CSS的關(guān)鍵趨勢。

1。現(xiàn)代佈局現(xiàn)在是主流

依靠浮子甚至Flexbox的日子都在褪色。在2024年， CSS網(wǎng)格和子網(wǎng)格得到了廣泛的支持和生產(chǎn)。但是，真正的改變遊戲規(guī)則是對集裝箱查詢的廣泛採用，這些查詢在所有主要瀏覽器中都在本地發(fā)貨。

• 容器查詢允許組件根據(jù)容器的尺寸進(jìn)行調(diào)整，而不僅僅是視口，而是將它們非常適合設(shè)計系統(tǒng)中可重複使用的UI組件。
• 開發(fā)人員將它們與@container規(guī)則和size功能配對，以創(chuàng)建真正的模塊化設(shè)計。
• 示例：當(dāng)卡組件狹窄時，卡組件可以從水平佈局切換到垂直佈局，而不需要JavaScript或包裝器類。

 ?？ㄆ?{
  容器類型：內(nèi)聯(lián)尺寸；
}

@container（最大寬度：300px）{
  ?？ㄆ?{
    撓性方向：列；
  }
}

除此之外， Faction-Ratio現(xiàn)在是標(biāo)準(zhǔn)的，簡化了響應(yīng)式媒體和網(wǎng)格項目，而無需黑客攻擊。

2。 CSS嵌套是（最後）本地

現(xiàn)在，最要求的功能之一- 本機(jī)CSS嵌套- 現(xiàn)在是在國旗後面的Chrome，Safari和Firefox支持的（預(yù)計在2024年將在2024年進(jìn)行全面推出）。這減少了對基本嵌套等薩斯（Sass）等預(yù)處理器的依賴。

 。卡片 {
  填充：1REM；

  ＆__標(biāo)題 {
    字體大小：1.25REM;
  }

  ＆：懸停{
    背景：＃f5f5f5;
  }
}

儘管它使用SASS用戶熟悉的&語法，但與預(yù)處理器（無混合素或功能）相比，它仍然受到限制。儘管如此，這是邁向更清潔，更可維護(hù)的CSS的重要一步，而無需構(gòu)建步驟。

許多團(tuán)隊開始謹(jǐn)慎地採用它，尤其是在使用諸如Astro或Plain HTML/CSS設(shè)置之類的較新框架的項目中。

3。公用事業(yè)第一CSS仍然占主導(dǎo)地位（但演變）

Tailwind CSS仍然是最受歡迎的公用事業(yè)優(yōu)先框架，但2024年看到競爭和精緻越來越多：

• Windi CSS和UNOCS的速度和靈活性正在獲得吸引力，尤其是在基於Vite的項目中。
• 默認(rèn)情況下，隨著時間（JIT）的速度（JIT） ，較小的捆綁包以及通過theme()和插件進(jìn)行更好的自定義進(jìn)行了改進(jìn)。
• 越來越多的團(tuán)隊使用任意值（ w-[237px] ， bg-[#ff3e82] ）用於一次性樣式，而無需離開HTML。

但是，關(guān)注語義和可維護(hù)性的開發(fā)人員繼續(xù)進(jìn)行回調(diào)。結(jié)果，我們看到混合方法的增加 - 使用佈局和結(jié)構(gòu)的實用程序類，但是用於復(fù)雜組件的自定義類。

4。 CSS自定義屬性是設(shè)計系統(tǒng)的核心

CSS變量（自定義屬性）不再是實驗性的，它們是主題，暗模式和動態(tài)樣式的中心。

在2024年，團(tuán)隊正在更系統(tǒng)地使用它們：

• 範(fàn)圍內(nèi)的範(fàn)圍變量:root ，組件甚至媒體查詢。
• 與JavaScript集成以進(jìn)行運(yùn)行時主題切換。
• 偏愛彩色 - 旋轉(zhuǎn)和偏愛降低的動作與變量可訪問性配對。

 ：根 {
  -Text-primary：＃1a1a1a;
  -bg-primary：#ffffff;
}

@Media（prefers-color-scheme：dark）{
  ：根 {
    -Text-primary：＃e0e0e0;
    -bg-primary：＃121212;
  }
}

諸如樣式詞典或Theo之類的工具可以幫助跨平臺同步設(shè)計令牌，使CSS變量成為較大設(shè)計工程工作流程的一部分。

5。性能和捆綁意識正在上升

由於網(wǎng)絡(luò)性能仍然至關(guān)重要，開發(fā)人員對CSS膨脹更加謹(jǐn)慎。

• 未使用的CSS檢測現(xiàn)在內(nèi)置在Chrome Devtools和Lighthouse中，將團(tuán)隊推向?qū)徍藰邮健?/li>
• 通過@scope （新興功能）進(jìn)行CSS範(fàn)圍隔離，正在測試安全刪除或懶惰樣式的一種方式。
• 通過構(gòu)建工具（例如WebPack或VITE），關(guān)鍵的CSS插入和代碼分類是SSR和SSG應(yīng)用程序中的標(biāo)準(zhǔn)配置。

也有一個安靜的轉(zhuǎn)變向較小的，專注的樣式表- 有些團(tuán)隊甚至放棄了全球框架，支持對性能敏感應(yīng)用程序的手寫CSS。

6。預(yù)處理器辯論正在消失

Sass的使用正在下降，不是因為它很糟糕，而是因為本地CSS正在趕上。

• 嵌套，變量和計算（ calc() ， clamp() ）現(xiàn)在無需彙編而工作。
• 開發(fā)人員正在選擇諸如帶有插件的Postcs（例如， postcss-preset-env ）之類的後處理器來使用未來的CSS。
• 建造的無效工作流（例如，在Astro，高度）偏向於最小工具的本地CSS。

也就是說，Sass在大型企業(yè)中仍然具有舊的代碼庫和復(fù)雜的主題需求。

最後的想法

2024年的CSS比以往任何時候都更有能力，表現(xiàn)和開發(fā)人員友好。該語言正在不斷發(fā)展，以解決現(xiàn)實世界中的問題 - 模塊化設(shè)計，響應(yīng)能力，主題和性能 - 始終需要JavaScript或框架。

趨勢很明顯：更精細(xì)的工具，更聰明的本機(jī)功能以及專注於可維護(hù)性。無論您是使用公用事業(yè)課程，編寫普通的CSS還是建造設(shè)計系統(tǒng)，基本面比以往任何時候都重要。

基本上，CSS正在成長 - 開發(fā)人員終於給了它應(yīng)有的尊重。

以上是2024年的CSS狀態(tài)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！