コーディングガイドライン

サイトの breakpoint

• sm(スマホサイズ) ~480px
• md(ミドルサイズ) ~768px
• lg(タブレットサイズ) ~1000px
• xl(ラージサイズ) ~1200px

1200px~をデフォルトとする。

CSS カスタムプロパティ

• 濃いめの文字色 #444455
• 基本の文字色 #575F6A
• 基本の背景色 #FCF9EF

できるだけマジックナンバーを減らしてデザインの共通化にに努めたい。 異なるデザインでも同様の意図で同様の値を取る場合は、カスタムプロパティに登録することを検討されたし。

Nuxt プロジェクトにお約束

文法や規則上守らないとエラーになるわけではないが、チーム内でのお約束があるので記載しています。

pages フォルダ

• パスはフォルダを分けて管理する

/about に該当する vue ファイルは、pages/about/index.vue に存在するべきである。

• クラス名は page-root に統一する

pages フォルダ内の vue ファイルは、template タグ直下のタグに page-root というクラス名を命名する。

components フォルダ

• ファイル名はアッパーキャメルケース
• クラス名はケバブケース

template タグ直下のタグにファイル名のケバブケースをクラス名にする。

PrimaryCard.vue なら、クラス名は primary-card とする。

• コンポーネントに margin を持たせない

その他

• inline css は使用しない
• マジックナンバーを極力避ける
• 単一ファイル内でもカスタムプロパティの定義をする