UnoCSS の紹介

UnoCSS とは何か

デザインシステムなどのルールを事前設定し利用するcssエンジン

2021年に登場した若いパッケージであるが State of css 2023 の調査における css フレームワークの満足度の項目で Tailwind などを抑えて2位となっている。
Author は Vitest などで知られる Anthony Fu

デザインシステムをcssファイルとして記述し読み込む場合と何が違うのか

実際に利用されていない class はビルド時にパージされる。（というよりは実際に利用された class のみ生成される）

TypeScript（の辞書(オブジェクト)）によって class を記述し、例えば以下の機能が提供される。

• classのエディタ補完
• ショートカット（既存classを複合した class の事前作成）
• Attributify Mode（html 内のクラスが複数長く連なることを防げる）
• 一般的に使われているclassのPresetの提供（全て独自ルールを作って管理したい場合は不要だが、ある程度基本的なものは頼るような方針も取れる）
• 評判の良い icon セットの提供
• Inspector（各 html で利用されている class の内容確認機能）

解決を期待する課題

• フロントエンドは、普段触らないバックエンドエンジニアや、ジュニアエンジニア、マーケターなど様々なバックグラウンドを持つ人によって修正が行われることも多く、css の記述の仕方に制限をかけることが難しい。
  その結果似たような css の記述があらゆる箇所で作成されるようになり、整理共通化することが実質不可能な複雑性をもってしまう。また、本来あるべきデザインルールに則らないものも次々に作成される。
  • デザインシステムの作成によりその軽減が期待できるが、事前想定されたもの以外で必要となる css の登場は避けられず、それらの記述によって上記の課題が生じる。
• バックエンドにおいてデータベーススキーマは重要性が高くその編集を行ってよいエンジニアを限定して運用するように、css も編集してよいエンジニアを限定するようなフロントエンド開発運用が一定の効果を持つと思われるが、あらゆるケースに対応する css を事前に記述することは現実的でなく、読み込み量の増大による影響の懸念もある。

Unocss は

• 多くの css classの事前記述を可能にする。
  • 「css を個別に記述することが例外である」という文化を作成することができ、無数にあらゆる箇所に増え管理できなくなりがちな css class を削減できる。
• 多数の css class を TypeScript により１箇所で整理・管理できるようになり、エディタの補完もできるため、デザインシステムや利用できる class の把握を容易にする。（css と同じような記述（ただの辞書）のため、css と少しの JavaScript が読めれば TypeScript について精通している必要はなく何が書かれているか理解できると思われる）