Upgrade to Pro — share decks privately, control downloads, hide ads and more …

VueでCSSモジュールを使った感想

 VueでCSSモジュールを使った感想

69aca783fc2efde4f97c21bbf5f9c635?s=128

Yasushi Asahi

May 14, 2019
Tweet

Transcript

  1. プロジェクトで CSSモジュールを 使った感想

  2. 自己紹介 名前 zero  本名:旭康史(あさひやすし) 所属 カラビナテクノロジー 仕事 フロントエンド 技術 React好き(vueも好き)。Docker好き。Golang好き。 他  今期の覇権は「ひとりぼっちの◦◦生活」

  3. ScopedParent.vue ScopedChild.vue <template> <div class="wrapper"> <h2>スコープドチャイルド</h2> </div> </template> <style scoped>

    .wrapper { background-color: lime; } </style> <template> <div class="wrapper"> <h2>スコープドペアレント</h2> <ScopedChild /> </div> </template> <style scoped> .wrapper { padding: 20px; background-color: lightcyan; } </style> <div data-v-4f362c8a class="wrapper"> <h2 data-v-4f362c8a>スコープドペアレント</h2> <div data-v-0dcdfa6c data-v-4f362c8a class="wrapper"> <h2 data-v-0dcdfa6c>スコープドチャイルド</h2> </div> </div> scopedは 普通に 競合する
  4. ModuleParent.vue ModuleChild.vue <template> <div :class="$style.wrapper"> <h2>モジュールチャイルド</h2> </div> </template> <style module>

    .wrapper { background-color: lime; } </style> <template> <div :class="$style.wrapper"> <h2>モジュールペアレント</h2> <ModuleChild /> </div> </template> <style module> .wrapper { padding: 20px; background-color: lightcyan; } </style> moduleは いくぶん 安心 <div class="ModuleParent_wrapper_1qsYl"> <h2>モジュールペアレント</h2> <div class="ModuleChild_wrapper_1XBnr"> <h2>モジュールチャイルド</h2> </div> </div>
  5. 親で定義した スタイルを 子に渡せる

  6. <template> <div :class="$style.wrapper"> <p>親</p> <div :class="$style.container"> <FirstChild :pStyle="$style" /> <SecondChild

    :pStyle="$style" /> </div> </div> </template> <style module> .wrapper { padding: 10px; text-align: center; border: 1px solid indigo; } .container { display: flex; justify-content: space-around; } /* 子供用のスタイル */ .box { padding: 10px; background-color: lightgreen; } .text { text-decoration: underline; } </style> <template> <div :class="pStyle.box"> <h1 :class="pStyle.text">長男</h1> </div> </template> <template> <div :class="pStyle.box"> <h2 :class="pStyle.text">次男</h2> </div> </template> Parent.vue FirstChild.vue SecondChild.vue
  7. moduleの嫌な所 ・いちいち $style って  書くのがめんどくさい ・クラス名がやたらと長くなって見づらい ・バインドし忘れる(:を付け忘れる) ・webpackの設定によっては  外部ライブラリのcssが崩れる。 ぶっちゃけデメリットのほうが大きい

    scopedの欠点は工夫次第でどうとでも出来る!!
  8. ありがとうございました またVueのプロジェクトや るとしたらscopedで書きま す (´・ω・`)