2020全球CSS報(bào)告，目前最流行的布局，最前沿的特性以及前沿的技術(shù)庫

介紹

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

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

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

本次調(diào)查一共統(tǒng)計(jì)了 10k+ 的人，由 Sacha Greif^[1] 設(shè)計(jì)、寫作以及編碼，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個(gè)方向（新特性、單位和選擇器、CSS技術(shù)、CSS工具庫、CSS使用環(huán)境和學(xué)習(xí)CSS渠道）進(jìn)行了深度的報(bào)告CSS的使用學(xué)習(xí)情況，從本次調(diào)查，可以讓你了解目前最流行的布局，最前沿的特性以及前沿的技術(shù)庫等等~ ?（本文會(huì)舉例個(gè)人覺得最值得講的進(jìn)行描述~，當(dāng)然我覺得整個(gè)報(bào)告都非常的迷人，都非常值得看，但是因?yàn)槠?，我?duì)某些部分進(jìn)行了刪減，強(qiáng)烈建議去看完整版?。?！https://2020.stateofcss.com/zh-Hans/）

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

采樣人員分布

人員的薪資分布

工作年限

工作崗位

CSS 熟練程度

新特性

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

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

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

布局

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

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

圖形與圖像

交互

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

排版

需要多行... 的時(shí)候，line-clamp 是個(gè)好幫手。

動(dòng)畫與過度

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

媒體查詢

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

其他特征

calc 幫助了我們計(jì)算單位，提前聲明will-change 有助于我們處理動(dòng)畫時(shí)候提高性能。

單位和選擇器

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

CSS技術(shù)

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

預(yù)/后處理

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

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

CSS框架

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

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

CSS 命名規(guī)范

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

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

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

CSS-in-JS

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

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

CSS工具庫

CSS使用環(huán)境

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

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

再推薦兩個(gè)國內(nèi)個(gè)人比較看好的CSS博客 一個(gè)是張?chǎng)涡竦牟┛停╤ttps://www.zhangxinxu.com/wordpress/）另一個(gè)是國服第一切圖仔的博客（https://github.com/chokcoco/iCSS/issues）

參考資料

往期精文