コーディング規約

コーディング規約ですー みんなで作っていきましょうーー

SCSS

id, classは小文字とハイフンで行う

/* OK */
<div id="music-card"></div>

/* NG */

<div id="Music-Card"></div>

Q.BEMとかは使わない?

A.小さくコンポーネントを切り出していればBEMが必要になるくらいのネストは発生しないと思ってます。

メディアクエリはmin-widthを使う

メディアクエリはmin-widthを使いましょう。 理由はここに書いてます。ざっくりいうとモバイルファースト作る時にmin-widthのほうがいいのでって感じです。

CSS MdiaQueryのmin-widthとmax-widthどちらを使う？

メディアクエリに書くプロパティ

メディアクエリには以下の2つのプロパティを書きます。

• 変化があるプロパティ
• 追加したいプロパティ

逆に以下のプロパティは書きません。

• 意味的には正しいけど画面を通して変化しないプロパティ 理由としてはメディアクエリに書くプロパティを減らすことでどの値が画面幅によって変化するのか把握しやすくするためです

例はこんな感じです。

  .container {
    margin: 0 12px;
    max-width: 1024px; // ここに書く

    @media (min-width: $breakpoint-md-min) {
      // max-width: 1024px; // 意味的には正しいけど画面幅によって変化するものではないのでここに書かない
      margin: 0 auto;
      background-color: blue;
    }

Vue

form周りはreactiveでまとめる

こんな感じでまとめるとformで入力する要素なんだなと分かりやすいので

<template>
  <div>
    <q-input v-model="form.title" label="title" />
    <q-input v-model="form.body" label="body" />
  </div>
</template>
<script>
  const form = reactive({
    title: '',
    body: '',
  })
</script>

API

アーキテクチャ