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

こんばんは、森田です。
早いもので今年最後の私の記事になりました。よいお年を。

今年を振り返ろうと思ったタイミングで The State of CSS 2021 が公開されていたので、そちらを参考に2021年のCSSのトレンドや流れを振り返ってみたいと思います。

The State of CSS 2021 とは

The State of CSS 2021 は、毎年世界のWEBエンジニアからサイト上で集められたアンケートを集計したサイトです。
回答数を見るかぎり大体7000〜8000件の回答が集められているみたいです。

国別ですとアメリカが20%、イギリスが6.6%、次いでドイツ、フランスと続きました。欧米と欧州が多いみたいですね。日本は1%でした。

言語別グラフを見ると72.8%が英語圏からの回答みたいです。次いでスペイン語、ロシア語と続きました。こちらでも日本語は1%でした。

なので、日本と少し違いがあるかもしれませんが世界の流れとして見ていきたいと思います。

CSS プロパティやルール

まずは CSS プロパティやルールを見ていきましょう。
特に利用率の割合が上がった CSS プロパティやルールをピックアップしました。

CSS GRID

昨年の73％から83%に上がりもはや普通に使われていると言っても過言ではないかもしれません。
レイアウトは grid で組むと考えて良さそうです。

position: sticky

position: sticky も75%から83%に上がり、普通に使われているみたいですね。
もう、スクロール時に要素を固定する JS を書くことは無さそうです。

スクロール時に要素をピタっとフィットしてくれる Scroll Snap。
昨年の21%から約1.5倍の30%まで利用率が上がっています。

デザインなどによりいつも使うプロパティではないですがCSSで気軽に使えるとなると、今後も使用率は上がっていきそうな気がします。

CSS カスタムプロパティ

CSS 変数ことカスタムプロパティ。昨年から10%以上増えて84.4%の利用率になっています。

私も Sass で変数を使うよりカスタムプロパティを使うことが多くなりました。

CSS 比較関数

要素の最大値が定義できる min()関数, 要素の最小値が定義できる max()関数, 最大値と最小値と推奨値を定義できる clamp()関数 といったCSS比較関数。

昨年あたりに全てのブラウザでサポートされて利用率が急増しているように見えます。

プリプロセッサー/ポストプロセッサー

こちらはプリプロセッサー/ポストプロセッサーの使用したことあるランキングです。

数年間変わらず1位は Sass、2位が PostCSS になり Less は3位に下がりました

PostCSS は Tailwind CSS などでも使われており使用度が上がったのではと予想します。

来年もランキングは変わらない気がしますが、CSSネイティブでのネスト CSS Nesting Module などの登場もあり、Sassの利用率は今後は下がる気がしています。

CSS フレームワーク

こちらは CSS フレームワークの使用したことあるランキングです。

過去に使用したものも含まれるため Boostrap が圧倒的ですが、2位の Tailwind CSS が 6%→26%→3%と年々順位を上げておりますね。

先日 Tailwind CSS v3.0 もリリースされ来年はもっと使われて％が上がると予想します。

CSS-in-JS

こちらは CSS-in-JS ツールの使用したことあるランキングです。

1位の Styled Components、2位の CSS Modules など上位6位までは3年間変わっていないですね。
CSS Modules は CSS-in-JS に入るのかちょっとわかりませんが。

しかし、個人的に気になったのは以下の満足度ランキングです。

vanilla-extract がいきなりの1位になっています。CSS-in-JS だけど別ファイルに書けて型も効くといったところが満足度を上げたのでしょうか。来年はどのくらい上がるか気になります。

vanilla-extractについては記事がありますので興味がありましたらご覧ください。

型安全な CSS Modules？「vanilla-extract」

ユーティリティ

その他CSSの便利なツールの使用率です。

コード整形の Prettier、ベンダープリフィックス付与の Autoprefixer、リンター＆整形の Stylelint など無くては欠かせないツールが入っています。

PostCSSプラグインが結構入っている気がします。PostCSSは神ツールですね。

まとめ

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