読者です 読者をやめる 読者になる 読者になる

やまろぐはてな

yamanokuの技術メモ。Qiitaは怖くて書けない。

ScopedCSSを使って思ったこと

Scoped CSS | Introduction

今個人的にVueを使ってアレコレ試しててVueコンポーネントを使うためにVue-loaderを導入しており、中でtempleteとstyleとscriptを一気に記述できるんだけど、styleで使えるscoped-cssECSSの設計思想にうまく合いそうだなと思う。

ecss.io

理由としては1つのコンポーネントに対して、必ず独自のクラス付けをして他のコンポーネントには上書きが起きないようにするみたいな考え方なので。

ECSS、とにかく長生きさせるためには誇大化してもしょうがないみたいなスタンスだけど、webpackとかでjs内に全部ひとまとめに出来たりするのがあれば、その辺についても深く考えなくてもいいかもしれないとか浅はかながらに思っています。

今はVue-loader使ってるけどPostCSSとかで使ってみてもいいかもしれない。(こっちはやったことないので憶測で言ってます)

www.npmjs.com

実例

<style>
/* 共通のスタイル */
</style>

<style scoped>
/* 特定のコンポーネント用スタイル */
</style>

ビルド後のイメージ

f:id:cardboarder:20161113235320p:plain

これをビルドすると

f:id:cardboarder:20161113235340p:plain

こんな感じになる。VueなんでIEとかは厳しいのかと思います(IE無視していいなら別に大丈夫かと)