Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vanilla-extractで タイプセーフに始める Utility first CSS
Search
eraser5th
October 15, 2022
Programming
0
270
Vanilla-extractで タイプセーフに始める Utility first CSS
eraser5th
October 15, 2022
Tweet
Share
More Decks by eraser5th
See All by eraser5th
Feature driven folder structureは何を解決する?
eraser5th
0
390
Other Decks in Programming
See All in Programming
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
9
5.2k
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.3k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
770
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
140
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
770
NPOでのDevinの活用
codeforeveryone
0
840
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
slecache
0
120
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
420
Hack Claude Code with Claude Code
choplin
4
2.1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
210
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
360
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building an army of robots
kneath
306
45k
What's in a price? How to price your products and services
michaelherold
246
12k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Typedesign – Prime Four
hannesfritz
42
2.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Six Lessons from altMBA
skipperchong
28
3.9k
Thoughts on Productivity
jonyablonski
69
4.7k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Transcript
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手法1 ▪ 関心の分離 ◦ HTMLにはコンテンツのみを含めるべきであり、スタイリングは全てCSSの中で行うべき ▪ HTML構造とCSSを切り離す ◦
BEMなどのCSS設計手法が考えられる ▪ 手順 ◦ HTMLを記述する ◦ 要素に対し、それを表すクラス名を付与する ◦ クラスをフックとしてCSSを記述しスタイリングする
従来のCSS手法1による問題点 ▪ DRYを保てない ◦ 全く同じ見た目でも、文書上それが別のものを表すのであれば違うクラス ◦ それぞれのクラスに対し全く同じスタイリングを定義する ◦
デザインの調整時などに修正範囲が拡大
従来のCSS手法2 ▪ CSSコンポーネント ◦ コンテンツに基づかない、再利用性の高いスタイルを提供する ◦ 例)card, button, modal
従来の手法2による問題点 ▪ コンポーネントのパターンへの対応のしづらさ ◦ 中身が左寄せ、中央寄せ、右寄せの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
ご静聴ありがとうございました!