介紹

CSS 從 1994 年 10 月首次被提出，到目前為止已經(jīng)20余年，但是 CSS 早已發(fā)生了天翻地覆的變化，2020的CSS  又是如何的呢？

我們現(xiàn)在可以使用 CSS Grid 輕松制作動態(tài)或響應(yīng)式的布局，以更少的代碼來進(jìn)行自適應(yīng)布局。CSS-in-JS 無需依賴全局樣式表，我們可以將樣式與組件寫在一起去構(gòu)建主題化的設(shè)計系統(tǒng)。

最重要的是，Tailwind CSS 突然出現(xiàn)，通過它的實用至上的 CSS 的類名使用，迫使我們重新考慮傳統(tǒng)的語義類名稱的設(shè)計。

本次調(diào)查一共統(tǒng)計了 10k+ 的人，由 Sacha Greif ^[1] 設(shè)計、寫作以及編碼， Rapha?l Benitte ^[2] 進(jìn)行數(shù)據(jù)分析和數(shù)據(jù)可視化。還有包括 Chen Hui-Jing ^[3] , Philip J?genstedt ^[4] , Adam Argyke ^[5] , Ahmad Shadeed ^[6] , Robert Flack ^[7] , Dominic Nguyen ^[8] , Fantasai ^[9] , and Kilian Valkhof ^[10] . 等人的努力。

本次主要可以從6個方向（新特性、單位和選擇器、CSS技術(shù)、CSS工具庫、CSS使用環(huán)境和學(xué)習(xí)CSS渠道）進(jìn)行了深度的報告CSS的使用學(xué)習(xí)情況，從本次調(diào)查，可以讓你了解目前最流行的布局，最前沿的特性以及前沿的技術(shù)庫等等~  （本文會舉例個人覺得最值得講的進(jìn)行描述~，當(dāng)然我覺得整個報告都非常的迷人，都非常值得看，但是因為篇幅原因，我對某些部分進(jìn)行了刪減，強(qiáng)烈建議去看完整版?。?！https://2020.stateofcss.com/zh-Hans/）

先通過 5 張圖來看看本次調(diào)查對象的樣本構(gòu)成。

采樣人員分布 

人員的薪資分布 

工作年限 

工作崗位 

CSS 熟練程度 

新特性

近年來，CSS出現(xiàn)了大量的新特性，但是社區(qū)需要時間來吸收新特性，所以CSS的一些新特性的采用率速度有點慢。

以下圖表顯示了按類別分組的所有特性的不同采用率。

外圈的大小對應(yīng)于了解某項功能的用戶總數(shù)，而內(nèi)圈則代表實際使用過該功能的用戶。 

布局 

也許 Grid 和 Flexbox 對你來說是最熟悉的，從上表也能看出來大部分的人使用了 flex，因為通過它，只要寫很少的代碼就能寫出多樣化的代碼。但是 Grid 在今年的調(diào)查中可以說上升的趨勢很快。

還有像 Subgrid ^[11] 和 Multi-Column Layout ^[12] 你可能不熟悉。但是相信如果看過 今年2020 web.dev live 的小伙伴一定記得 Ten modern layouts in one line of CSS ^[13] ，里面就大量使用了 Subgrid 的特性， 僅僅用一行代碼實現(xiàn) 現(xiàn)在流行的，自適應(yīng)垂直居中、三列布局、圣杯布局和雙飛翼布局等等布局。（也強(qiáng)烈建議看上面那篇文章，當(dāng)我想翻譯那篇文章的時候，發(fā)現(xiàn)掘金已經(jīng)有人先翻譯了，英文看著吃力的可以去搜中文版）

圖形與圖像 

還在煩惱圖片的適配問題嗎？ 也許你可以使用 ???object-fit?? 試試。

交互 

還記得我在上一篇 從破解某設(shè)計網(wǎng)站談前端水印(詳細(xì)教程) ^[14] 中講的 ??pointer-events?? 嗎

排版 

需要多行... 的時候， ??line-clamp?? 是個好幫手。

動畫與過度 

Transitions、 Transforms 、 Animations 依舊是當(dāng)下主流的動畫方式。

媒體查詢 

對 prefers-color-scheme 眼熟嗎，利用好它我們就可以適配 mac 的深色模式~

其他特征 

calc幫助了我們計算單位，提前聲明 will-change 有助于我們處理動畫時候提高性能。

單位和選擇器 

px/%/em/rem肯定是老牌CSS 單位，但是vh,vw 的使用率也逐漸上升了~

CSS技術(shù)

CSS 生態(tài)系統(tǒng)正在經(jīng)歷各種更新，因為像 Bootstrap 這樣的較老的主流現(xiàn)在必須適應(yīng) Tailwind CSS 等較新的參與者。更不用說整個 CSS-in-JS 運動了，盡管它還沒有成為 CSS 的主流，但是它是非常具有潛力的。

預(yù)/后處理

滿意度、興趣、使用和知曉率排名。 

SaSS 依舊是大哥大，這里可以提一下 libsass 已經(jīng)棄用，已經(jīng)使用了 dart-sass，社區(qū)各個正在對齊中，以后再也不用擔(dān)心 node-sass 安裝編譯出錯了。

CSS框架

滿意度、興趣、使用和知曉率排名。 

CSS 框架這里真的是神仙打架，又誕生了一些新的工具庫，但是 Tailwind CSS 依舊處于不可撼動的地位 （想起了幾年前還是 BootStrap 霸榜，不禁感嘆自己真的老了老了。）

CSS 命名規(guī)范

滿意度、興趣、使用和知曉率排名。 

各個規(guī)范比較可以看 https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/

規(guī)范是寫組件庫的時候尤其重要的一環(huán)。

CSS-in-JS

滿意度、興趣、使用和知曉率排名。 

隨著 React 這樣的庫興起，CSS-in-JS 寫起來真的太爽了。著名的框架 Material UI ^[15] （實現(xiàn)了 Google 的 Material Design）就是采用的這樣的模式。

CSS工具庫 

CSS使用環(huán)境 

CSS 已經(jīng)越來越趨于多終端設(shè)備化了,不僅限于PC/Mobilede 。

學(xué)習(xí)CSS渠道 

再推薦兩個國內(nèi)個人比較看好的CSS博客 一個是張鑫旭的博客（https://www.zhangxinxu.com/wordpress/）另一個是國服第一切圖仔的博客（https://github.com/chokcoco/iCSS/issues）