Style Guide

コードの書き方を一意に揃え、読み易さや不具合を素早く解消するため、
以下の通りスタイルガイドを定めます。

ただし必須ではありませんので、臨機応変に調整してください。

• ID・クラス名はケバブケースで書く
  e.g. #id-name, .class-name

HTML

• 全体を .wrapper で囲う
  CSS の不足の初期化やベーススタイルの適用に利用する。
• CSS の指定がないクラスは書かない（推奨）
  クラス名が変換されず、外部 CSS の影響を受けやすくなります。

CSS

• ID に適用しない（推奨）
• プロパティは外から内向きの順に書く（推奨）
  display → position → box → content → decoration
• Mobile First で組む（推奨）
  Media Queries は大きな画面向けに指定します。
  Media Queries のブレイクポイントは以下を使用する。
  • PC：screen and (min-width: 641px)
  • SP：screen and (max-width: 640px)（多用しない）
• 省略記法を積極的に使う（推奨）
  e.g. background: 0;
  • 1未満の数値は0を省略する
    e.g. .5em

Script

• 変数名はキャメルケースで書く
  var variableName;
• 不使用の変数は消す

関数

• 呼び出し箇所より後ろで定義する
• 関数式は利用しない

読みやすくするために冗長な関数は後ろに定義します。
また、順序が逆転しても動作するよう関数式は利用しません。

// Bad
var functionName = function() { ... }
functionName();

// Good
functionName();
function functionName() { ... }

変数

• 変数名はキャメルケースで書く
  var variableName;
• 不使用の変数は消す