Vue.jsでCSS Modulesを使ってみた

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!

ご清聴ありがとうございました

Vue.jsでCSS Modulesを使ってみた

Vue.jsでCSS Modulesを使ってみた

Masaki Koyanagi

More Decks by Masaki Koyanagi

Other Decks in Programming

Featured

Transcript