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

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

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

The State of CSS 2021 とは

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

https://2021.stateofcss.com/en-US/features/layout/#grid

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

position: sticky

https://2021.stateofcss.com/en-US/features/layout/#position_sticky

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

https://2021.stateofcss.com/en-US/features/interactions/#scroll_snap

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

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

CSS カスタムプロパティ

https://2021.stateofcss.com/en-US/features/other-features/#variables

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

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

CSS 比較関数

https://2021.stateofcss.com/en-US/features/other-features/#containment

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

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

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

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

https://2021.stateofcss.com/en-US/technologies/pre-post-processors/#pre_post_processors_experience_ranking

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

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

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

CSS フレームワーク

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

https://2021.stateofcss.com/en-US/technologies/css-frameworks/#css_frameworks_experience_ranking

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

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

CSS-in-JS

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

https://2021.stateofcss.com/en-US/technologies/css-in-js/#css_in_js_experience_ranking

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

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

https://2021.stateofcss.com/en-US/technologies/css-in-js/#css_in_js_experience_ranking

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

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

ユーティリティ

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

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

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

まとめ

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

Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています

弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか?

もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です!

求人応募してみる!

投稿者 Morita Sou

フロントエンドグループチームマネージャー。
適切な技術提案やコミュニケーションを出来るように心掛けています。CSS設計・CMS構築や開発環境の構築などを得意としています。Macやエディタ、開発環境などを快適にすることにいつも燃えています。