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
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.1k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
100
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
760
Goで作る、開発・CI環境
sin392
0
230
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
680
Is Xcode slowly dying out in 2025?
uetyo
1
270
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
Featured
See All Featured
Bash Introduction
62gerente
613
210k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
4 Signs Your Business is Dying
shpigford
184
22k
Code Review Best Practice
trishagee
69
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Thoughts on Productivity
jonyablonski
69
4.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Six Lessons from altMBA
skipperchong
28
3.9k
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
ご静聴ありがとうございました!