The State of CSS という1万人以上の開発者にアンケートをとって、その年のリアルなトレンドを分析したサイトがあります。先日この2020年版が公開されました。
当然、無料で公開されているのでご自身でどんな技術が採択されているかを確認するのが一番ですが、私なりの解釈を交えて解説してみたいと思います。
一言でいうと・・
少し乱暴な表現ですが、 Tailwindバキバキの時代 と言えます。
それを裏付ける2つの結果があります。
CSSフレームワークに関する調査
CSSフレームワークの満足度に関する調査で、Tailwindが前年に続き1位を獲得し、さらに満足度が81%→87%と向上しています。2位のPureCSSは71%なので、かなり差をつけての1位となりました。
参考：The State of CSS - CSS Frameworks
CSS方法論に関する調査
CSS方法論の満足度に関する調査では、ユーティリティファーストが1位を獲得し、前年と比較し満足度が向上した 唯一の 方法論となっています。
ユーティリティファーストはTailwindが提唱する方法論であり、その他の方法論と比べて制約が少ないことが特徴です。
参考：The State of CSS - CSS Methodologies
Tailwindをメインストリームと考える
上記の結果から
- Tailwindがそもそもフレームワークとして品質が高い
- ユーティリティファーストが現代の開発環境にマッチしている
ということが分かります。
さらに、Tailwindをメインストリームと考えるとその他の結果にも説明がつき、これら一連の結果は一つのストーリーになっていると私は考えています。
プリプロセッサに関する調査
postcssの満足度が微増し、sassが微減しています。
この理由は、Tailwindがpostcssと相性が良く（公式がpostcssPluginを提供している）postcssの利用者が増えたことが要因の一つと考えられます。
また、ユーティリティーファーストで実装する場合、CSSの記述量は非常に少なくなるため、sassの諸機能（ネスト, extend, mixin, ..etc）を使う必要性が無くなったのも満足度が微減した要因だと考えています。
Tailwind自身もプリプロセッサはいらないよと言っており、とはいえpurgeしたいしautoprefixerかけたいし・・で、postcssが採用されるのは自然な流れだと思います。
参考：The State of CSS - Pre-/Post-processors
CSS-in-JS に関する調査
CSS Modules が微増し、その他のライブラリが微減しています。
ここは人によって解釈が割れるところですが、 Tailwindで表現するのが難しいスタイルを何で実現するか を考えたとき、CSS ModulesがTailwindと最も相性が良いため、CSS Modulesが引き続き採用される結果となったと私は考えています。
Tailwindには theme() という機能がありcssファイル上で tailwind.config の値を使うことができます。
Styled Components のような独特な記法も無く、カジュアルに Tailwind と CSS Modules を組み合わせられる点は他のライブラリと比較して優位性があると思います。
下記はcss上で tailwind.config を参照する例です。
.foo {
color: theme('colors.gray.100'); /* theme() で tailwind.config を参照 */
background-color: theme('colors.red.500');
}
import styles from './index.module.css';
export const IndexPage: React.FC = () => (
<div>
<p classNames="text-gray-100 bg-red-500">Tailwindの基本的な使い方</p>
<p classNames={styles.foo}>CSS Modulesを使う</p>
</div>
)
2つの <p> タグは同じ見た目になります。
このように、基本的にはTailwindが提供するユーティリティクラスを使って実装しますが、デザインによってはTailwindで実現することが難しいものもあります。
このときCSS Modulesで従来のようにCSSを書きつつ、カラーコードは tailwind.config の値を使うようにすることで、柔軟かつ保守性の高いUIを実装することができます。
※この解釈は意見が割れます
Tailwindで表現するのが難しいデザインを何で実現するかについては、まだ答えが出ていません。 tailwind.config のカスタマイズ次第ではTailwindだけであらゆるデザインを実現することも可能です。
私の見解としては、TailwindとCSS Modulesの相性が良いため、CSS Modulesの満足度向上に影響があったと考えています。
参考：The State of CSS - CSS-in-JS
アワード
The State of CSS にはアワードのコンテンツもあり、「また使いたいと思った技術」の部門でTailwindが1位を獲得しています。
しかも2位（Atomic CSS）3位（CSS Modules）に大差をつけての1位です。
以上のことから、
現在のメインストリームはTailwindであり、Tailwindと相性の良いツールが採用される傾向にあると考えることができます。
つまるところTailwindは最強なのか？
うーん、現時点では最強.. 私だったらLPを制作するときでも、Webアプリケーションを開発するときでもTailwindを採用します。
世の中の多くの人が利用し、期待が高まっているのは間違いありません。
多くの人が利用することで課題も出てくるでしょうし、その課題を解決するため機能改善もされるかもしれません。
しかし、ユーティリティファーストという言葉はTailwindの台頭で見聞きするようになりましたが、ユーティリティクラスを大量に用意した実装スタイルは 10年以上前のWeb制作の現場で使われていた手法です。年代物の案件のソースコードには mt-8 text-bold といったクラスを見つけることができるでしょう。
フロントエンドの開発環境が成熟したいまだからこそ、私たちは回り回ってユーティリティファーストに行き着きましたが、やはりグローバルスコープであることの課題はつきまといます。したがって ShadowDOM のような全く別のアプローチでWeb開発の課題を解決しようとする動きはこれからもあると思います。
今すぐTailwindを勉強した方が良い？
冷静に評価すると、まだ ASSESS（利用率が少なく満足度が高い。注目に値するテクノロジー）の一つです。学習コストも非常に低いので新規プロジェクトを立ち上げる際に、選択肢の一つとして持っておく程度で良いかなと思います。
参考: The State of CSS 2020 - Technologies
ShadowDOMはどうなった？
ShadowDOMはまだ浸透してないこともあり、そもそもState of CSSのアンケートに選択肢としてあがってなかったようです。Vaadinのメンテナーの方が異議を唱えてました。
スコープを閉じることの恩恵は計り知れませんが、課題もあるため用途次第だと思います。
BEMはどうなる？
BEMはとても優れたCSSの方法論です。
当時は命名規則が気持ち悪いという声もありましたが、市民権を獲得したいまは誰も何も言いません。
ただ、人々はセマンティックなクラス名を考えるのに、少し疲れてしまったのかもしれません。Tailwindをベースとする開発が増えると、BEMの必要性は下がります。
sassはどうなる？
sassもとても優れた言語です。sassを採用しているOSSも多いです。
ただし、ruby-sass → node-sass → dart-sassと移行に手を焼いた方も多いと思います。Tailwindをベースとする開発が増えると、sassの必要性は下がります。
Bootstrapはどうなる？
The State of CSSの結果では ANALYZE（利用率が高く満足度が低い。現在利用している場合は再評価してください）に分類されています。
抜群の知名度を誇り、ソースコードを参考にさせてもらうことも多々ありました。現在開発中のv5は従来のOOCSSというより、ユーティリティファーストっぽい設計になっていたので満足度が向上する可能性はあります。
最後に
The State of CSS 2020からWebフロントのトレンドを読み解いてみました。
私の解釈としては、メインストリームはTailwindで、Tailwindと相性の良いツールが採用される傾向にあると考えます。一方で、Tailwindの利用率が上がるとBEMやSass、Bootstrapの必要性は下がると考えます。
また当然、トレンドが全てではありません。時代の潮流を少しだけ知ることができたら、それで良いかなと思います。Youtubeで口頭の解説もあるので良かったらご覧ください。