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
Vue.jsでCSS Modulesを使ってみた
Search
Masaki Koyanagi
July 22, 2019
Programming
0
120
Vue.jsでCSS Modulesを使ってみた
WeJS @ 34th
https://wajs.connpass.com/event/138500/
Masaki Koyanagi
July 22, 2019
Tweet
Share
More Decks by Masaki Koyanagi
See All by Masaki Koyanagi
Vitestを使った型テストの始め方
mascii
5
2.4k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
880
Pros and Cons で考える Vue 2 Composition API
mascii
4
940
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
450
TypeScript で Optional Chaining を使ってみた
mascii
1
630
不変量
mascii
1
110
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.1k
JavaScriptのバージョンの話
mascii
1
2k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.9k
Other Decks in Programming
See All in Programming
Product Management LT会_クアンド新家
shinshin
0
210
【Go言語】ジェネリクス
tomo1227
0
170
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
CSC307 Lecture 08
javiergs
PRO
0
330
APIのない大学ログインWebサービスをWKWebViewとJavaScriptでアプリ化した話
akidon0000
1
330
Namespace on read
tagomoris
2
370
Advanced App Shrinking Techniques
cbeyls
2
150
Jetpack for KMP
fornewid
1
290
Cloudflare Workers x AWS Lambdaの組み合わせユースケース / Cloudflare Workers x AWS Lambda Combination Use Case
seike460
PRO
2
310
MIERUNE BBQにおけるユーザー中心設計()
mierune
PRO
1
110
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
Folding Cheat Sheet #7
philipschwarz
PRO
0
150
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.8k
Teambox: Starting and Learning
jrom
130
8.6k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
13
430
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
19k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
35
6.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.3k
A designer walks into a library…
pauljervisheath
201
24k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Creatively Recalculating Your Daily Design Routine
revolveconf
214
11k
Unsuck your backbone
ammeep
666
57k
Designing Experiences People Love
moore
136
23k
Transcript
Vue.jsで CSS Modulesを 使ってみた @mascii_k WeJS 34th @RAKSUL
自己紹介 • 小柳 昌生(Masaki Koyanagi) • ビザスク エンジニア • Twitter:
@mascii_k
お話ししたいこと • Vue.js で CSS Modules 使ってみたら、デザイ ナーとエンジニアの分担がうまくいった話
きっかけ
デザイン事情 • すでにVue.jsを導入しているプロダクトでグロー バルCSSにしたところ、デザインが壊れた • CSSに関する規約はデザイナー任せになっていた ◦ CSSはエンジニアが手をつけにくい存在に
デザインを守りたい • 今度こそデザインもコンポーネント指向にして、 スタイルをカプセル化する • エンジニアがCSSの規約を決める ◦ エンジニアも手をつけやすい状態にする
どうやってカプセル化するか?
Scoped CSSか? Vue.jsなのでScoped CSSで良いと思っていたが... • 既存CSSと同居させる方針のため、Scoped CSSで は予期せぬスタイルが当たる可能性があった • 親コンポーネントと子コンポーネントで同じ
class名を用いると予期せぬスタイルが当たるこ とがあることも判明した
Scoped CSSでは
CSS Modulesでは • .title のようなセレクタが .HogeComponent_title_1UHoE に変換される • 既存CSSとの同居はCSS Modulesの方がしやすい
• :class="$style.title" がちょっとだけきもい?
詳しい比較・注意点はQiitaで! https://qiita.com/mascii/items/3202b9e18fd4a7366ac1
CSS Modules で得られたもの
デザイナーとの分担がしやすく • エンジニアが仮枠のコン ポーネントを用意 • デザイナーが仮枠にマーク アップとスタイルを組む • エンジニアがコンポーネン トを分解する
コンポーネントを分解 • スタイルについてコンポーネントの外への影響が ないことと、外からの影響受けてないかが明瞭に • コンポーネントをスタイルが崩れることなく機能 単位に分割できた
ネーミングルールに頭使わなくなった • グローバルCSS, Scoped CSSのようにclass名の ネーミングルールを意識しなくて良くなった • デザイナーも「CSS Modules好き」とのこと! •
エンジニアもclass名の変更を積極的にできるよ うになった
今後の展望
より協業しやすくしたい • デザイナーが想定したコンポーネントの分け方 と、エンジニアが想定した分け方は少しずれる ◦ 認識合わせのために Storybook を入れてコン ポーネントを管理したい
まとめ • Vue.jsを使っていてデザイナーがスタイルを組ん でいるならCSS Modulesは良さそう! • スタイルを組めないエンジニアでも、デザインを 守るために考えて行動することができる!
We are Cascading Style Sheeters!
ご清聴ありがとうございました