search

Tokyo-Metro-Gov / covid19

東京都 新型コロナウイルス感染症対策サイト / Tokyo COVID-19 Task Force website
https://stopcovid19.metro.tokyo.lg.jp/
MIT License
6.26k stars 1.97k forks source link

CSS のカイゼン #904

Open amotarao opened 4 years ago

amotarao commented 4 years ago

まず全体に関わるCSSの課題をまとめたいです

改善詳細 / Details of Improvement

  1. 他コンポーネントに影響が出ないスタイルの書き方に統一する
  2. global な style を書くファイルを統一する
  3. 同じスタイルをまとめる

個人的に気になるものは上記3つ、それぞれの詳細は下記 他に気になることがあればコメントをお願いします！

kaizumaki commented 4 years ago

659 flowページのコーディングでは、積極的にcss-modulesを導入しています。他のページもその方向になればいいなと思っています。

amotarao commented 4 years ago

1. 他コンポーネントに影響が出ないスタイルの書き方に統一する

scoped css

https://vue-loader-v14.vuejs.org/ja/features/scoped-css.html 現状 scss を利用するコンポーネントがほとんど <style> に scoped をつけると、ビルド時コンポーネントごとに全DOMに data-v-hogehoge 属性が自動付与される 同じクラス名でも別コンポーネントであれば data-v-hogehoge が異なるため、スタイルが上書きされることがなくなる

<template>
  <p class="example">EXAMPLE</p>
</template>

<style lang="scss" scoped>
.example {
  // style
}
</style>

css modules

https://vue-loader-v14.vuejs.org/ja/features/css-modules.html

659 で積極的に利用

簡単に言えばセレクタを変数化する ビルド時にクラス名が被らないように変換される js からのアクセスも可能だが、 $style. が必須


<template>
  <p :class="$style.example">EXAMPLE</p>
</template>

<style lang="scss" module>
.example {
  // style
}
</style>
amotarao commented 4 years ago

2. global な style を書くファイルを統一する

global な style が書かれている箇所が分散している

amotarao commented 4 years ago

3. 同じスタイルをまとめる

ほぼ同じ見た目なのにスタイルが別々に書かれている箇所がある デザイン変更時に漏れが発生する可能性もあるので、まとめたい

amotarao commented 4 years ago

一旦、個人的に気になる部分を列挙しました ほかに CSS 関連で気になることがあれば是非コメントをお願いします

kawokas commented 4 years ago
  1. 同じスタイルをまとめる 各ページ Heading

見出しのコンポーネントを統一するの下記PRでバグ修正に伴いやっております〜 https://github.com/tokyo-metropolitan-gov/covid19/pull/658

amotarao commented 4 years ago

scoped css と css modules について 検討材料になりそうな情報

af12066 commented 4 years ago

margin, paddingはあちこちに定義が分散、かつピクセル値が奇数だったりすると体裁が整わなかったりするので、 Vuetifyが提供しているHelper Classを使うと良さそうですー Spacing - Vuetify

af12066 commented 4 years ago

font-sizeの指定が@include font-size(<number>)、px、rem、vwそれぞれ存在し、実装者によって流儀が異なっているので、@include font-size(<number>)に合わせたい。 引数の数値はなんらかの規則性をもたせたり（現状は16 = 1remであり、上記のSpacing Helper Classに沿うなら12, 20, 24など4の倍数が好ましい?）、指定できるサイズを数パターンにしぼりたい。