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.3k
WebHID API でリングコン のセンサー値を取得してみた
mascii
1
790
Pros and Cons で考える Vue 2 Composition API
mascii
4
890
Joy-ConをJavaScriptでプレゼンリモコンにした話
mascii
0
410
TypeScript で Optional Chaining を使ってみた
mascii
1
600
不変量
mascii
1
100
Nuxt.js+Firebaseで個人サービスを作るまで
mascii
1
2.1k
JavaScriptのバージョンの話
mascii
1
1.9k
あなたのお家に眠るラズパイを救出したい
mascii
4
2.8k
Other Decks in Programming
See All in Programming
コーンフレークから始める モデリング会話入門
ogurotakayuki
0
370
新宿ダンジョンを可視化してみた
satoshi7190
2
260
雑に思考を整理する技術と効能
konifar
60
29k
Random\Randomizer クラスで日常のあれこれを解決しよう! / Random\Randomizer class solves familiar trouble
cocoeyes02
0
250
使ってみよう Azure AI Document Intelligence
kosmosebi
2
320
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
790
#phpcon_odawara オープン・クローズドなテストフィクスチャを求めて / open closed test fixtures
77web
3
230
PHPはいつから死んでいるかの調査
chiroruxx
1
400
ONE WEDGE_company_guide
1wedge_one
0
490
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
1
1.1k
DMMプラットフォームがTiDB Cloudを採用した背景
pospome
8
4.1k
Fast JSX: Don't clone props object #28768
yossydev
1
130
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
GraphQLの誤解/rethinking-graphql
sonatard
50
9.2k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
25
2.3k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Done Done
chrislema
178
15k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Statistics for Hackers
jakevdp
789
220k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
The Pragmatic Product Professional
lauravandoore
25
5.8k
Making Projects Easy
brettharned
108
5.5k
It's Worth the Effort
3n
180
27k
Optimizing for Happiness
mojombo
370
69k
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!
ご清聴ありがとうございました