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

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

998b440234ba4524a2c1ba1f130728f8?s=128

Masaki Koyanagi

July 22, 2019
Tweet

Transcript

  1. Vue.jsで CSS Modulesを 使ってみた @mascii_k WeJS 34th @RAKSUL

  2. 自己紹介 • 小柳 昌生(Masaki Koyanagi) • ビザスク エンジニア • Twitter:

    @mascii_k
  3. お話ししたいこと • Vue.js で CSS Modules 使ってみたら、デザイ ナーとエンジニアの分担がうまくいった話

  4. きっかけ

  5. デザイン事情 • すでにVue.jsを導入しているプロダクトでグロー バルCSSにしたところ、デザインが壊れた • CSSに関する規約はデザイナー任せになっていた ◦ CSSはエンジニアが手をつけにくい存在に

  6. デザインを守りたい • 今度こそデザインもコンポーネント指向にして、 スタイルをカプセル化する • エンジニアがCSSの規約を決める ◦ エンジニアも手をつけやすい状態にする

  7. どうやってカプセル化するか?

  8. Scoped CSSか? Vue.jsなのでScoped CSSで良いと思っていたが... • 既存CSSと同居させる方針のため、Scoped CSSで は予期せぬスタイルが当たる可能性があった • 親コンポーネントと子コンポーネントで同じ

    class名を用いると予期せぬスタイルが当たるこ とがあることも判明した
  9. Scoped CSSでは

  10. CSS Modulesでは • .title のようなセレクタが .HogeComponent_title_1UHoE に変換される • 既存CSSとの同居はCSS Modulesの方がしやすい

    • :class="$style.title" がちょっとだけきもい?
  11. 詳しい比較・注意点はQiitaで! https://qiita.com/mascii/items/3202b9e18fd4a7366ac1

  12. CSS Modules で得られたもの

  13. デザイナーとの分担がしやすく • エンジニアが仮枠のコン ポーネントを用意 • デザイナーが仮枠にマーク アップとスタイルを組む • エンジニアがコンポーネン トを分解する

  14. コンポーネントを分解 • スタイルについてコンポーネントの外への影響が ないことと、外からの影響受けてないかが明瞭に • コンポーネントをスタイルが崩れることなく機能 単位に分割できた

  15. ネーミングルールに頭使わなくなった • グローバルCSS, Scoped CSSのようにclass名の ネーミングルールを意識しなくて良くなった • デザイナーも「CSS Modules好き」とのこと! •

    エンジニアもclass名の変更を積極的にできるよ うになった
  16. 今後の展望

  17. より協業しやすくしたい • デザイナーが想定したコンポーネントの分け方 と、エンジニアが想定した分け方は少しずれる ◦ 認識合わせのために Storybook を入れてコン ポーネントを管理したい

  18. まとめ • Vue.jsを使っていてデザイナーがスタイルを組ん でいるならCSS Modulesは良さそう! • スタイルを組めないエンジニアでも、デザインを 守るために考えて行動することができる!

  19. We are Cascading Style Sheeters!

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