ScopedCSSを使って思ったこと

created at:

Scoped CSS | Vue Loader

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

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

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

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

https://www.npmjs.com/package/postcss-scoped

実例

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

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

ビルド後のイメージ

<style scoped>
article {
  position: absolute;
  top: 0;
  left: 0
  width: 100%;
  height: 100%;
  backg round-color: #efefef;
}
.detail {
  height: 100%;
  margin: auto;
  padding: 30px 5% 0;
  background-size: cover;
  background-position: center center;
}
.detail+a {
  text-align: center;
}
.detail_heading {
  background: #fff;
  color: #333;
  font-size: 2rem;
  font-weight: 700;
  margin-top: 50px;
  padding: .5em .75em;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  border-bottom: 1px solid #f0f0f0;
  box-shadow: 0 1px 1px rgba(0,0,0,.35);
}
</style>

これをビルドすると

Image from Gyazo

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

アーカイブ一覧へ戻る

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップページに戻る