Vanilla-extractでタイプセーフに始める Utility first CSS

Vanilla-extractで  タイプセーフに始める  Utility first CSS  学部2年 @eraser5th 

自己紹介 

自己紹介  ▪ 学部2年 ERASER（加藤豪, @eraser5th）  ▪ 趣味  ◦ 環境構築（ Neovim,
Wezterm, …etc）  ◦ Vtuber  ◦ スプラトゥーン  ▪ スキル  ◦ Webフロントエンド  ▪ React, Next, TS, GraphQL, Vue, Nuxt, …etc   ◦ UIデザイン（入門中）   ▪ figma  ポートフォリオ（即席）

今回のお題目  ▪ Utility first CSSとは  ▪ Vanilla-extractとは  ▪ Vanilla-extract +
Utility first 

Utility first CSSとは？ 

Utility first CSSとは？  （ほぼ）一つのCSSプロパティのみを操作するユーティリティクラスを用い、マークアップ内でスタイリングを記述するというもの。       

従来のCSS手法１    ▪ 関心の分離  ◦ HTMLにはコンテンツのみを含めるべきであり、スタイリングは全てCSSの中で行うべき   ▪ HTML構造とCSSを切り離す  ◦
BEMなどのCSS設計手法が考えられる   ▪ 手順  ◦ HTMLを記述する  ◦ 要素に対し、それを表すクラス名を付与する   ◦ クラスをフックとしてCSSを記述しスタイリングする  

従来のCSS手法１による問題点  ▪ DRYを保てない  ◦ 全く同じ見た目でも、文書上それが別のものを表すのであれば違うクラス   ◦ それぞれのクラスに対し全く同じスタイリングを定義する   ◦
デザインの調整時などに修正範囲が拡大  

従来のCSS手法２  ▪ CSSコンポーネント  ◦ コンテンツに基づかない、再利用性の高いスタイルを提供する   ◦ 例）card, button, modal
 

従来の手法２による問題点  ▪ コンポーネントのパターンへの対応のしづらさ  ◦ 中身が左寄せ、中央寄せ、右寄せのCard   ▪ 改善としてコンポーネント＋ユーティリティ  ◦ 先程の例であれば、align-left,
align-center, align-rightなどのある特定のスタイリングのみに関心を持つユーティリティクラスを追加   ◦ コンポーネントにパターンを追加することなくさまざまなデザインに対応が可能となる  

Utility first CSS  ▪ 全てのスタイリングを、先程のユーティリティのようなものを組み合わせることによって実現させる  ◦ bg_red100, cl_black900, flex,
fill, br_xl, fs_md, …   ▪ 利点  ◦ 一貫したスタイルになる   ▪ 既存のものを使うのであればそのスタイルに乗っ取ることができる   ▪ 新たに組むのであれば、その時点でデザインシステムをある程度固めることができる   ◦ 過度な抽象化を抑える   ▪ 欠点  ◦ 時として大量のユーティリティクラスを付与するので、マークアップの見通しが悪くなる  

Vanilla-extractとは？ 

Vanilla-extractとは？  ▪ CSS-in-TSライブラリ  ▪ 特徴  ◦ 型安全  ◦ 無効なプロパティ値はビルド時にエラー  
◦ CSSファイルをビルド時に生成するのでランタイムの計算が少ない   ◦ さまざまなプラットフォーム上で動作  

Vanilla-extractの欠点  ▪ CSS-in-JSではあるが、◯◯◯.css.tsというファイルに記述する必要がある。例えば Component.css.ts  ◦ ファイルを分割することにより関心ごとは減る。しかしフロントにおいてスタイルへの関心はつきものである。そのため一つのコンポーネントに対し二つのファイルに注意する必要があるというのは辛い。見えていることによる安心感も捨てたものではないと思っている。  
▪ ランタイム時の計算によってCSSのプロパティ値を変化させることは不可能。あらかじめビルド時に生成されている、つまり固定値のみしか使うことしかできない。  

Vanilla-extract + Utility first 

Vanilla-extract + Utility first    ▪ 解決される問題  ◦ Vanilla-extractは.css.tsファイルに記述する必要がある(vanilla-extract)  
▪ ユーティリティクラスを提供するので、マークアップ内にスタイルを記述できる   ◦ tailwindなどの多くのutility-first-cssには型が存在しない(utility first)   ▪ 全てのユーティリティクラスにTSによる型の補償   ◦ エディタに専用のプラグインが必要（utility first）   ▪ TSのLSPによる補完ができれば、どんなエディタでも補完が効く   ▪ プロパティ値も定義元参照を用いて確認することができる  

実装  ▪ 今回は時間等の都合上、Tailwindのほぼ丸パクリ  ▪ （個人的に）よく使うプロパティのユーティリティクラスは一通り作成済み  ▪ 擬似クラス・擬似要素などには一部対応 

通常のユーティリティクラスの実装例 

hoverなどの実装例  各ユーティリティ定義ファイルに、hoverなどのsprinkle用のプロパティとショートハンド（省略形）を定義  

hoverなどの実装例  各階層のindex.tsでこれらのプロパティとショートハンドをまとめる 

hoverなどの実装例  作成  vanilla-extract の sprinkle という機能を用いて実装 

使用例  ユーティリティクラスを用いて実装したCardコンポーネント 

使用例  hoverを用いたButtonコンポーネント 

使用例  .css.tsファイルに切り出すことも可能 

デモ 

今後の課題・展望  ▪ 課題  ◦ hoverなどの実装に使っているsprinkleという機能の特性上、複数のプロパティをまとめたユーティリティクラスの実装が難しい。  ◦ 同様の理由で変数名などの統一について考える必要性がある。   ▪
混乱のない範囲であれば別プロパティでもまとめたいが(bg-black と bg-coverのようなもの)、sprinkleではこれが許されない。  ◦ ビルドサイズ  ▪ 既にcss, jsの総ビルドサイズが3000KiBほどになっており、ビルドにも時間がかかる   ▪ (これに関してはもはや、Vanilla-extractの使用を止める他無いような気もしている)   ▪ 展望  ◦ ほぼTailwindの丸パクリ状態なので、他のライブラリなど比較しつつ、オリジナルにしていきたい   ◦ 上の課題がある程度解決し、必要なユーティリティを増やし終えたらライブラリとして公開  

今回のコード  https://github.com/eraser5th/vanilla-extract-utility-first     

広告  技術書典向けに作成したNeovimの統合環境。  これでみんなもNeovimmerになろう！    https://github.com/eraser5th/tech-book.nvim   

ご静聴ありがとうございました！ 

Vanilla-extractでタイプセーフに始める Utility first CSS

Vanilla-extractでタイプセーフに始める Utility first CSS

eraser5th

More Decks by eraser5th

Other Decks in Programming

Featured

Transcript