CSS利用動向調査の最新版「State of CSS 2020」が公開：各種CSS技術の満足度や使用率が明らかに

CSSの利用動向に関する年次調査の最新版の結果が発表された。世界102カ国のCSSユーザー1万1000人超の回答が集計、分析されている。最も利用者が多く、満足度が高かったのはスタイルシート言語「Sass」だった。

[＠IT]

　CSS（Cascading Style Sheets）の利用動向に関する年次調査の最新版「State of CSS 2020」が2020年12月に発表された。世界102カ国のCSSユーザー1万1492人の回答を集計、分析したものだ。

　この年次調査はCSSの最新の利用状況を浮かび上がらせることを目指している。その背景には「CSS Grid」「CSS-in-JS」「Tailwind CSS」の台頭など、CSSが現在、これまで以上に急速に進化しているとの認識があるという。

　以下では2020年に発展した機能や技術、ユーザーの評価などについて主な内容を紹介する。

導入が最も進んだ機能「CSS Grid」

　State of CSS 2020は4つの機能、技術を選んで表彰している。CSS Grid、Tailwind CSS、PostCSS、CSS Modulesだ。

　今回の調査で導入が最も進んだ機能は、CSS Gridだった。2020年調査で「使っている」と答えた回答者の割合が73.3％となり、2019年調査の54.7％から18.6ポイント増えている。この増加幅は、調査したCSS機能の中で最も大きかった。

　「object-fit」（17.8ポイント増）と「Variables」（15.2ポイント増）がこれに続いた。

最も評価が上がった技術「Tailwind CSS」

　Tailwind CSSは、2020年調査で「また使いたい」と答えた回答者の割合が、2019年調査と比べて17.8ポイント増えた。この増加幅は、調査したCSS技術の中で最も大きかった。

　増加幅が2番目に大きかった技術は「Atomic CSS」（Utility-first CSS、10.8ポイント増）、3番目は「CSS Modules」（10.1ポイント増）だった。

最も満足度が高い技術「PostCSS」

　「PostCSS」は、満足しているユーザーの割合が91.4％と最も高かった。CSS Modules（86.8％）、Tailwind CSS（86.6％）がこれに続いた。

開発者の学習意欲が最も高い技術「CSS Modules」

　学びたいと考えている開発者の割合が75.1％と最も高かったのはCSS Modulesだ。2番目に高かったのはTailwind CSS（62％）、3番目は「Styled Components」（60％）だった。

なかなか普及が進まないCSSの新機能

　近年、新しい機能がCSSに続々登場している。コミュニティーが新機能を吸収するのに時間がかかることから、普及は遅れ気味だ。

　State of CSS 2020では、CSSの機能を次の7つのグループに分け、各グループに属する個々の機能について、認知度や使用率などを明らかにした。

• Layout（レイアウト）
• Shapes & Graphics（外観とグラフィックス）
• Interactions（操作）
• Typography（タイポグラフィ）
• Animations & Transforms（アニメーションと変形）
• Media Queries（メディアクエリ）
• Other Features（その他の機能）

　次の図にある7つの点線の円は、各機能グループについて知っているユーザー数を示す。点線の円の内側にある二重の円はそれぞれ、個々の機能について知っているユーザー数（外側）と使っているユーザー数（内側）を示す。

　State of CSS 2020のWebサイトでは、この図の二重の円をマウスホバーの対象にすると、個々の機能について知っているユーザー数、使っているユーザー数、使用率をオーバーレイ表示する。

各CSSの機能について知っているユーザー数（外側の円）と使っているユーザー数（内側の円）（出典：State of CSS 2020）

よく使われる単位とセレクタは

　State of CSS 2020では、CSSのさまざまな単位、疑似要素、セレクタの使用状況を報告している。最も利用者が多かった単位は「px」、次いで「%」「vh」または「vw」「em」「rem」だった。

　セレクタでは、「:first-child」「:nth-child()」「:last-child」の順に利用者が多かった。

CSS関連技術の満足度はどうだったのか

　調査では「プリプロセッサ／ポストプロセッサ」「フレームワーク」「方法論」「CSS-in-JS」という4つのカテゴリーでそれぞれの技術について、満足度、興味（開発者が学びたいか）、使用状況、認知度を明らかにした。

　これを基に、満足度とユーザー数の観点から、これらの技術を分類したのが次の図だ。