2020全球CSS報告新鮮出爐，前端從業者平均年薪35w
介紹
CSS 從 1994 年 10 月首次被提出，到目前為止已經20余年，但是 CSS 早已發生了天翻地覆的變化，2020的CSS 又是如何的呢？
我們現在可以使用 CSS Grid 輕松制作動態或響應式的布局，以更少的代碼來進行自適應布局。CSS-in-JS 無需依賴全局樣式表，我們可以將樣式與組件寫在一起去構建主題化的設計系統。
最重要的是，Tailwind CSS 突然出現，通過它的實用至上的 CSS 的類名使用，迫使我們重新考慮傳統的語義類名稱的設計。
本次調查一共統計了 10k+ 的人，由 Sacha Greif [1] 設計、寫作以及編碼， Rapha?l Benitte [2] 進行數據分析和數據可視化。還有包括 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技術、CSS工具庫、CSS使用環境和學習CSS渠道）進行了深度的報告CSS的使用學習情況，從本次調查，可以讓你了解目前最流行的布局，最前沿的特性以及前沿的技術庫等等~ （本文會舉例個人覺得最值得講的進行描述~，當然我覺得整個報告都非常的迷人，都非常值得看，但是因為篇幅原因，我對某些部分進行了刪減，強烈建議去看完整版！！！https://2020.stateofcss.com/zh-Hans/）
先通過 5 張圖來看看本次調查對象的樣本構成。
采樣人員分布
人員的薪資分布
工作年限
工作崗位
CSS 熟練程度
新特性
近年來，CSS出現了大量的新特性，但是社區需要時間來吸收新特性，所以CSS的一些新特性的采用率速度有點慢。
以下圖表顯示了按類別分組的所有特性的不同采用率。
外圈的大小對應于了解某項功能的用戶總數，而內圈則代表實際使用過該功能的用戶。
布局
也許 Grid 和 Flexbox 對你來說是最熟悉的，從上表也能看出來大部分的人使用了 flex，因為通過它，只要寫很少的代碼就能寫出多樣化的代碼。但是 Grid 在今年的調查中可以說上升的趨勢很快。
還有像 Subgrid [11] 和 Multi-Column Layout [12] 你可能不熟悉。但是相信如果看過 今年2020 web.dev live 的小伙伴一定記得 Ten modern layouts in one line of CSS [13] ，里面就大量使用了 Subgrid 的特性， 僅僅用一行代碼實現 現在流行的，自適應垂直居中、三列布局、圣杯布局和雙飛翼布局等等布局。（也強烈建議看上面那篇文章，當我想翻譯那篇文章的時候，發現掘金已經有人先翻譯了，英文看著吃力的可以去搜中文版）
圖形與圖像
還在煩惱圖片的適配問題嗎？ 也許你可以使用 ???object-fit?? 試試。
交互
還記得我在上一篇 從破解某設計網站談前端水印(詳細教程) [14] 中講的 ??pointer-events?? 嗎
排版
需要多行... 的時候， ??line-clamp?? 是個好幫手。
動畫與過度
Transitions、 Transforms 、 Animations 依舊是當下主流的動畫方式。
媒體查詢
對 prefers-color-scheme 眼熟嗎，利用好它我們就可以適配 mac 的深色模式~
其他特征
calc幫助了我們計算單位，提前聲明 will-change 有助于我們處理動畫時候提高性能。
單位和選擇器
px/%/em/rem肯定是老牌CSS 單位，但是vh,vw 的使用率也逐漸上升了~
CSS技術
CSS 生態系統正在經歷各種更新，因為像 Bootstrap 這樣的較老的主流現在必須適應 Tailwind CSS 等較新的參與者。更不用說整個 CSS-in-JS 運動了，盡管它還沒有成為 CSS 的主流，但是它是非常具有潛力的。
預/后處理
滿意度、興趣、使用和知曉率排名。
SaSS 依舊是大哥大，這里可以提一下 libsass 已經棄用，已經使用了 dart-sass，社區各個正在對齊中，以后再也不用擔心 node-sass 安裝編譯出錯了。
CSS框架
滿意度、興趣、使用和知曉率排名。
CSS 框架這里真的是神仙打架，又誕生了一些新的工具庫，但是 Tailwind CSS 依舊處于不可撼動的地位 （想起了幾年前還是 BootStrap 霸榜，不禁感嘆自己真的老了老了。）
CSS 命名規范
滿意度、興趣、使用和知曉率排名。
各個規范比較可以看 https://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/
規范是寫組件庫的時候尤其重要的一環。
CSS-in-JS
滿意度、興趣、使用和知曉率排名。
隨著 React 這樣的庫興起，CSS-in-JS 寫起來真的太爽了。著名的框架 Material UI [15] （實現了 Google 的 Material Design）就是采用的這樣的模式。
CSS工具庫
CSS使用環境
CSS 已經越來越趨于多終端設備化了,不僅限于PC/Mobilede 。
學習CSS渠道
再推薦兩個國內個人比較看好的CSS博客 一個是張鑫旭的博客（https://www.zhangxinxu.com/wordpress/）另一個是國服第一切圖仔的博客（https://github.com/chokcoco/iCSS/issues）
