The State of CSS 2022 を見て2022年の CSS を振り返る

こんばんは、森田です。
早いもので今年ももう師走の半ば、毎年恒例の The State of CSS 2022 が公開されていたので、そちらを参考に2022年の CSS のトレンドや傾向を見ていきたいと思います。

The State of CSS 2022 とは

The State of CSS は、毎年世界のWEBエンジニアからサイト上で集められたアンケートを集計したサイトで毎年年末に集計結果が発表されます。

調査の理由は、「開発者が技術的な選択を行うのを支援するために、Web 開発エコシステムの今後の傾向を特定するために作成されました」とのことです。
今年は 2022年10月1日から 11月1日までアンケートが実施され、14,310件の回答が集まりまったそうです。

国別ですとアメリカが11.7%、次いでドイツ5.9%、フランス4.2%、イギリス4.2と続きました。欧米が多いみたいですね。日本は0.7%で去年の1%より下がりました。

言語別グラフを見ると64.3%が英語圏からの回答みたいです。次いでドイツ語5.3%、フランス語5%と続きました。こちらでも日本語は0.5%でした。
なので、日本と少し違いがあるかもしれませんが世界の流れとして見ていきたいと思います。

それでは、私が気になったトピックを見ていきます。

CSS フレームワーク

こちらは CSS フレームワークの使用率のランキングです。

相変わらず Bootstrap が1位ですが去年より4%下がり81%となっています。
過去の使用経験も含まれるため不動の1位ですが、ジワジワと減少傾向であるのがわかります。

2位の Tailwind CSS が8%アップの46%まで上がりました。来年は50%を超えそうな勢いですね。
個人的に好きなのでもっとシェアが伸びて欲しいです。

CSS-in-JS

こちらは CSS-in-JS の使用率のランキングです。

1位の Styled Components、2位の CSS Modules など上位5位までは2019年から4年間変わっていないですね。

枯れた技術として安定しているということでしょうか。

CSS の使用法

CSS の用途についての章です。

何に使用しているか？

デスクトップアプリケーションが62%、サイトや LP が41.7%。
CSSだから当然の結果とは言えますが、意外にサイトの割合が少ないですね。

ブラウザの非互換性

サポートがない、またはブラウザー対応のために使用するのが難しいCSS 機能はありますか？

:has() や @container や Gridの追加機能 Subgrid などが使いたくても使えない機能の上位です。

本当にそう思います。:has() と @container は Firefox が対応すれば使えるので早く対応して欲しいです。

欲しい機能

現在、CSS に足りない機能は何だと思いますか？

CSS Nesting がぶっちぎりの一位。

これは間違い無いですね。パラダイムシフトと言える進化と言えると思います。
ピュア CSS でネストができれば Sass などのプリプロフェッサーの出番もだいぶ減りそうですね。

Google Chrome Canary ですでに実装されたりしているので来年には普通に使うことができるかもしれません。対応ブラウザがモダンブラウザのみの案件に限りますが、SPサイトのみの場合などワンチャンあるかもしれないですね。

まとめ

2022年も色々と変化がありました。
2023年もきっと色々と素晴らしい技術が出てくると思うので楽しみですね。
積極的に取り入れていきたい所存です。

CSS Nesting は本当に各ブラウザさん実装お願いします🙏
と Firefox さん :has() を早く標準実装してください🙏

初詣でお祈りしてきます。