コーディングルール

Megumi Hano edited this page Mar 11, 2016 · 8 revisions

言語毎のインデントスタイルやインデントサイズ、ホワイトスペースの設定は EditorConfig で定義する

HTML

  • HTML タグは必ず小文字で記述する
  • 終了タグは必ず記述する
  • alt 属性は必ず記述し、適切な文言がない場合は null 値とする
  • HTML ファイル内では基本的に HTML のみのマークアップを行い、視覚表現(装飾やアニメーション)は外部ファイル化した CSS、JavaScriptで行う

Jade

  • プロトタイプとして HTML の作成に使用する
  • 記法、クラスやプロパティは前項の HTML に準拠
  • ファイル間にて共通で使用するデータは setting.json でまとめる
    • 例 : meta タグ内の description, keywords など

Jade におけるファイル分割のルール

  • _ (アンダーバー) から始まるファイルは html ファイルとして出力しない
  • 新たにページを生成する際には index.jade をコピーしてスタートする
  • ファイル分割は core, layout, modules を採用する

core

関数等システムのベースになるファイルを配置

module

繰り返し使えそうな要素をモジュール化する

layout

ヘッダーやフッター等は layout として記述

  • _l-header.jade
  • _l-footer.jade など

CSS(SCSS)

基本的な考え方

  • Sass は SCSS 記法で記述する
  • テーマのカスタマイズにおいて新たに class を付与する場合、BEM の考え方に準拠
  • モバイルファースト

id

  • id で指定されたスタイルを上書きするのは大変なため、スタイル目的の id は基本的に使用しないこと
  • ページ内リンクに使う場合のみ id を使用する

class

  • レイアウト要素については SMACSS を部分的に取り入れ、接頭詞「l-」を使用する
  • block と element の接続にはダブルアンダーバー (__) を利用し、element, modifier は “&” を含んだセレクタで指定する
  • modifier の接続にはダブルハイフン (--) を利用 (MindBEMding)する
  • element は1つが望ましい(最大2つまで)
    • Element の階層が深くなるとその分セレクタ名称も長くなり、可読性及びメンテナンス性が失われるため
.block {
    width: 100px;
    height: auto;
    margin: 0;
    background: #ffffff;
    &__element {
        padding: 20px;
    }
    &--modifier {
        background: $colorRed; 
    }
}

参考

SCSS ファイル分割のルール

  • ファイル分割は Jade と同様に core, layout, modules を採用する
  • layout と module は sass-globbing で読み込む対象とし、内包されるファイルは全てファイル名順に読み込まれる

core

リセットやミックスイン関数等システムのベースになるファイルを配置

  • _config.scss
  • _default.scss
  • _mixins.scss
  • _placeholder.scss
  • foundation/
  • _settings.scss
  • _foundation.scss

module

ボタンやプラグイン用スタイルなど繰り返し使えそうな要素をモジュール化する

  • _m-buttons.scss

layout

ヘッダーやページのスタイルは layout として記述し、保守性向上や git 上でのコンフリクトを避ける為、想定される利用シーン毎にファイルを積極的に分割すること

  • _l-header.scss
  • _l-footer.scss
  • 新しくファイルを作る場合は _l-base.scss をコピーしてスタート

ファイルの命名規則

HTML ファイル、ディレクトリ、画像ファイル及び CSS (ID 及び CLASS セレクタ) の名前の付け方は以下を基本ルールとする

  • 英数字のみを使用
  • 機種依存文字の使用禁止
  • 必ずアルファベットからはじめ数字からはじめてはいけない
  • 全角スペース、半角スペース (Space) の使用禁止
  • “\”, “/”, “*”, “:”, “?”, “<”, “>”, “|”, “$” これらの文字の使用禁止

画像

画像ファイルにおける命名規則は “種類” と “個性” を “_” アンダーバーでつなげる

例 img_company.jpg

種類 個性
img wapuu

種類の規則

“種類” は種別の判断が出来る英単語を使用し、単語が複数ある場合はキャメルケースで繋げる

種類 説明
img 画像・写真
ttl タイトル
txt テキスト
icon アイコン
btn ボタン要素
bg 背景
bnr バナー

個性の規則

“個性” も “種類” と同じくそれ自体を判断が出来る英単語を使用し、単語が複数ある場合はキャメルケースで繋げる