ltmemo

CSSのUtility firstという概念について学んだ

tags:
2021-10-25

ToC

CSSとutility first

最近tailwindcssのような、utility firstを標榜するライブラリが、フロントエンド界隈で見られる
合わせてAtomicなCSS in JSといった単語も見かける

フロントエンドを触る以上ある程度の知識が必要だろうということで、この機会に気になる単語の概要を洗ってみる

(ちなみに自分自身はstyleをcssフレームワークに任せてばかりなので、そこまでCSSに知見と経験があるわけではない)

今までのCSSに関するアーキテクチャと解決したかった課題

自分の理解ではcssはglobalな設定であり、影響範囲の見通しの悪さ(==保守性の低さ)が問題であり、
それを解決するためにBEMのような設計原則みたいなものが生まれてきた(と理解している)

見通しの悪さという点で、 Vue や React などのライブラリではcomponentに閉じたstyleを適用できるようにしてある程度解決している印象がある

tailwindcssの概要と解決方針

新しいライブラリを覚える時はそのライブラリが解決したい課題を掘り下げると良い（と思っている）
documentによると

制約された単純なユーティリティのセットから複雑なコンポーネントを構築します

とある。これはunixのコマンドのように、小さな範囲に関心のあるものを組み合わせて、
複雑なUIを作ろう、という考え方に聞こえる

解決する課題はCSS保守性の低さであると感じた。
見た目はこんな感じになるようだ

<div class="max-w-sm mx-auto flex">...</div>

classNameそれぞれに対応したstyleが定義されていて、それを組み合わせてstylingしていくようだ

メリットとして

  • クラス名を考える必要がない
  • cssが肥大化しない
  • htmlのクラスはlocalなので、変更を加えるのが怖くない

といったものがあるようだ。inlineでstyleを書いたり、cssのpropsとの差はなにかという気持ちになったがこれにもdocumentに記載がある
擬似クラスなどが使用できる点や、設定を元にstyleを決定できるところが良いみたいだ
メディアクエリの必要なレスポンシブにも対応している

特にcssが肥大化しないというのは大きいように感じる。componentに閉じたstyleであっても、
同じような表現を形の違う別のcomponentで使いたい時はそれぞれに定義する必要があるだろう（例えば色やpaddingとか）。これを使いまわそうとするとcomponentに閉じていたstyleが漏れてしまって意味がない

CSSの四大原則?

CSS Architectureという記事に、CSSは

  • 予測可能である(predictable)
  • 再利用可能である（reusable）
  • メンテナンス可能である（mantainable）
  • スケール可能である(scalable)

とある。これを踏まえるとtailwindcssはこれらの項目をある程度満たしているように感じた

classNameでの宣言は予測可能であるし、細かい粒度で作られたstyleは再利用可能である
メンテナンス可能性についてはうまくいえないが、スケーラブルであるのは間違いないだろう
必要なデザインが増えたとしても、既存のクラスの組み合わせで実現可能だからだ

Atomic CSS in JS?

Atomic CSS-in-JS

最近タイムラインで見かけた記事で、おもしろそうだったので軽く目を通してみた
冒頭に書かれているが、Component分割の考え方であるAtomicDesignとは関係がない概念である

概念と書いた通り、Atomic CSS in JSは特定のライブラリなどを指すものではなく考え方であるようだ

内容的には極端にしたutility firstなcssで、一つのclassに一つのstyleを当てる

(以下は上記のリンクより転載)

.bw-2x {
  border-width: 2px;
}
.sans {
  font-style: sans-serif;
}

共通のスタイルだろうとその場限りのスタイルだろうと同じように扱えたり、
必要なCSSをすべて抽出することが可能だそうだ

参考になるものとして、TwitterのReact-Native-WebとFacebookのStylexが上げられていたが、深くは追いかけていない

今後流行ってくるかもなーぐらいの気持ちでwatchしようと思う

まとめ

CSSのutility firstなる概念について、tailwindcssからある程度知見を得た
CSSの保守は複雑であり、それを解決する方向性としてでてきたものがutility firstである
小さいものを組み合わせて複雑なものを作るという考え方は非常に共感できた

実際は保守性だけではなく、不要なcssを生成しないか、のようなパフォーマンスに関わる観点も重要だろう。CSS Moduleは補完なども効かせづらい代わりにこの辺の最適化がやりやすいらしい

今後何が流行るかはわからないが、近年のwebアプリの複雑さは増して来ていて、それに追従するために技術も進歩しているのを感じられて良かった

有名だがtailwindcssの思想を持ち込んだCSS in JSライブラリにChakraUIがある。型補完などの恩恵も受けられて嬉しい。今度新しく何かを作る時は使ってみたい

最終更新: 2021-10-27