News
Meetup
YouTube
Blog
書き起こし
2020/08/21 に公開
2556 views
このエピソードについて
@spring-raining が @f_subal @potato4d に Tailwind CSS やフロントエンドにおける CSS 設計について話を聞きました。
ゲスト紹介
ピクシブ株式会社 フロントエンドエンジニア
Tailwind.css + classNames() を型安全に扱う TypeScript Language Service Plugin を書いた
Tailwind.cssとは
https://tailwindcss.com/
Utility-firstなCSSフレームワーク
CSSのプロパティがそのままクラス名と紐付く設計
Atomic CSS:
https://acss.io/
高いカスタマイズ性も特長
実務で感じたTailwindの特長
pixivのデザインシステムを構築していく際の様々な問題
最初はReact componentを横展開していく計画だったが、Reactを採用していないプロダクトへの導入が課題
自前のCSSフレームワークを作るコストの高さ
メタCSSフレームワークとしてのTailwind.cssの可能性
TypeScriptユーザーのためのirontail
https://github.com/fsubal/irontail
Tailwindが純粋なCSSフレームワークであるがゆえの問題
エディタの補完だけでは対処できないバージョンアップへの追従
TypeScript language serviceを作る際の話
classNamesとの組み合わせにより動作
https://github.com/JedWatson/classnames
Tailwindのメリット
どんな既存のプロジェクトでも導入でき、どんなプロジェクトでも通用する可搬性
JavaScriptとCSSの境界が明確
Utility-firstでありながらも、クラスの組み合わせにより自然とデザイン規約に従うことができる設計
デザインシステムの例外とその対処
デザインシステムを設計しても、例外的な要求はしばしば発生する
Utility系のクラスを用意して上書きしていくこともできるが、あえてstyleを直接書いて可視化するのも手
実装側からデザインシステムへのフィードバックを生み出す
これからのCSS設計
Tailwindの登場によって、従来のCSSフレームワークともCSS-in-JSとも違うCSSの複雑化に対する解が生まれた
CSSを設計・実装する上で、今後どのようなことが重要になる?
spring-raining: メディアクエリの多様化への対処
f_subal: CSS設計を通したエンジニアとデザイナーの意識の共通化
potato4d: フィールに対するCSSを超えた包括的な設計
Refs
フロントエンドエンジニア / フロントエンド開発センター| 求人詳細 | LINE株式会社
https://linecorp.com/ja/career/position/475
BGM: 騒音のない世界
https://noiselessworld.net/
SE: 魔王魂
https://maoudamashii.jokersounds.com/
1.0x
1.3x
1.5x