Vue.js × CSS Modules でコンポーネント設計してみた話

by Sho Ezawa

Slide 1

Slide 1 text

Vue.js × CSS Modules で  コンポーネント設計してみた話 Presented By @glico800

Slide 2

Slide 2 text

自己紹介 glico Sho Ezawa ( ) / @glico800 ビザスク Webチームに所属  フロントエンドやUIが好き  妻・リクガメ・シマリスの４人家族 ?

Slide 3

Slide 3 text

もくじ 1. フロントエンド開発環境を見直した話 2. Vue.js で CSS Modules を選んだ話  3. コンポーネント設計でハマった話  4. まとめ

Slide 4

Slide 4 text

1. フロントエンド開発環境を見直した話

Slide 5

Slide 5 text

どうして？ Atomic Design コンポーネント指向変化に強い設計 - デザインリニューアルではを採用    - 開発環境もに移行して、  デザインのにしたい 

Slide 6

Slide 6 text

変化に強い設計にしたい使っていないCSS 巨大なグローバルCSS バックエンドとの密結合 ...

Slide 7

Slide 7 text

コンポーネントを作りやすい環境作り前環境密結合 No SFC 疎結合ディレクトリ構成の整理 SFC を使えるように外からの影響を受けにくく

Slide 8

Slide 8 text

2. Vue.js で CSS Modules を選んだ話

Slide 9

Slide 9 text

前提既存のページに作ったコンポーネントを埋め込む  山田太郎個人プラン  1 アドバイスする  依頼する  案件管理  スポットコンサルの依頼をしたい方は、気になる分野のアドバイザーを探してみましょう。たくさんのアドバイザーから提案を受け取りたい場合は、ビザスク上で公募することも可能です。アドバイザーを探すアドバイザーとして活躍したい方は、職歴やビジネス経験を記入することで、指名相談が届きます。プロフィールを編集ステータスアラート更新日時タイプ金額相談相手タイトル案件一覧ここがコンポーネント

Slide 10

Slide 10 text

実現したかったことコンポーネント外のスタイルから影響を受けず、  かつ外へも影響を与えないようにしたい   .button { } .button { } .button { }.button { }

Slide 11

Slide 11 text

CSS Modules を選んだ理由　　外からは影響を受けてしまう  しっかりカプセル化コンポーネント外のスタイルから影響を受けず、  かつ外へも影響を与えないようにしたい   　　 Scoped CSS は外への影響はないが、  　　 CSS Modules ならコンポーネントの  　　スタイルをできる .button { } .button { } .button { } .button { } .button { } .button { }

Slide 12

Slide 12 text

CSS Modules とは CSS をモジュール化ローカルスコープになる - CSS Modules はして構成する  ための仕組み  - 全てのクラス名とアニメーション名がデフォルトで 

Slide 13

Slide 13 text

No content

Slide 14

Slide 14 text

続きはWebで！   【Vue.js】Scoped CSSよりCSS Modulesの方がベターだった件  https://qiita.com/mascii/items/3202b9e18fd4a7366ac1

Slide 15

Slide 15 text

3. コンポーネント設計でハマった話

Slide 16

Slide 16 text

コンポーネント間でスタイルの上書きを  しないことにした話

Slide 17

Slide 17 text

Alert Button 理想

Slide 18

Slide 18 text

Alert Button 理想 Alert Button 現実

Slide 19

Slide 19 text

どうして？参考：SFC style ordering · Issue #808 · vuejs/vue-loader · GitHub  https://github.com/vuejs/vue-loader/issues/808  コンポーネントの依存関係を追従する CSSの実現が困難   前提：CSS は詳細度が同じなら基本的に後から  　　　読み込まれたスタイルが優先される  

Slide 20

Slide 20 text

つまり（※あくまでイメージです）こんなイメージ Parent Child We can’t! Must consider about below.

Slide 21

Slide 21 text

コンポーネント間で  スタイルの上書きをしないことに

Slide 22

Slide 22 text

バリエーションがあるコンポーネント  をどう実装するのか問題

Slide 23

Slide 23 text

- シンプルにまとめやすい  - コンポーネント外への依存やファイル数が増えやすい案１：細かくファイル分け

Slide 24

Slide 24 text

- ファイル数や依存が少なめ  - 複雑になりやすい案２：props でスタイル切り替え

Slide 25

Slide 25 text

- ファイル数や依存が少なめ  - 複雑になりやすい案２：props でスタイル切り替え案２を採用！ファイル数が爆発しない  依存が少ないのは大事  - バリエーションが増えても - コンポーネント指向なので - 複雑になりやすいのは工夫次第で抑止できそう  - デザイナーさんも LGTM してくれた

Slide 26

Slide 26 text

ちょっと工夫 props で切り替えるスタイルは分けて記述

Slide 27

Slide 27 text

まとめ

Slide 28

Slide 28 text

まとめコンポーネントの   スタイルを外から完全に切り離せる class名に悩む時間が減る - Vue.js × CSS Modules の構成はのが良い  - 既存環境をコンポーネント指向に移行していく場合  ので相性◎  - 完全に１から作るなら Scoped CSS  でも十分かも

Slide 29

Slide 29 text

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