web015　コーディング規約 (個人) - ねこきっくぱんちのメモ帳

コーディング規約 (個人)

悩まず迷わず効率的な開発ができるよう、
考えて決めた事に関するコーディング規約を記載していきます。
※随時更新

0.心得的なところ
・htmlは「文書構造」を作る。
・htmlの文法及びアウトラインチェックが完了後、css記述にうつる。
・cssは「見栄え(装飾)」を作る。
・jsは「動き」を作る。
・「統一した書き方」を意識する
・余計な事は書かない。
・素早く考えて(設計)、素早く書く。しかし雑にならないように。

1.ディレクトリ構成
{}はディレクトリの意味

・基本構造は以下とする。
domain>
index.html
favicon.ico
　　{img}
　　bg_xxx_960_150.jpg
　　item.png
　　{master}
　　bg_xxx.psd
　　item.ai
{css}
　　style.css
{js}
{別ページ}
　　index.html
...

・別ページはbodyにidを名付ける。
　TOPのindex.htmlで利用しているcssの最後に、
　名付けたidを利用してcssを記載していく。
　#anotherPage .content { ・・・}

2.フォーマット

インデント
　・htmlは原則インデントせず左寄せにする。(インデント修正が地味に手間になるため)
　・cssはインデントを行う。ただし１行で済む場合は１行に納める。
　・インデントは半角２個分とする。

カラーコード
　・全て小文字(#fff;)で記載する。　※shiftを押す手間削減
　・10進数(rgba)より16進数(#fff;)を優先する。※ファイル軽量化

プロパティ記述順序
　・以下の順番で記載する。トップダウン的なイメージ。
　　1.commonと被っていないか確認
　　2.フレーム系（margin, padding, background-image,,,）
　　3.装飾：フォント(font-size, font-family,letter-spacing,,)
　　4.装飾：カラー(color,)

コメント
html
　・構造がネストした場合、締めタグの横に属性が分かる形でコメントを入れる。

　<div id="container">
　<div class="box">
　　　....
　<div><!-- .box --!>
　<div><!-- #container -->

css
　・リセットCSS、common、全体のコンテナ、メディアクエリ、別ページの順に記載していく。
　※リセットの次にcommonを記載するのは、共通化抽出の意識づけのため。

/*-------------- Reset css*/
/*-------------- common*/
/*-------------- .container */
/*------------------- header */
/*------------------- .main */
/*------------------- footer */
/*-------------- media (max-width:1300px) */
/*-------------- media (max-width:660px) */
/*-------------- #About */　←別ページ

/* --- Resett css ----*/ ←個人的に可読性が低いためワードは右寄せに。

サイズ
　・pxで統一する。emは利用しない。％ではなくpxで指定。
　bodyは絶対固定値とする。floatレイアウトで崩れる場合があるため。
　emはDTPの考え方を重視してる単語であるため。
　※ body { font-size: 16px; }

・コーテーション
　JavaScriptでの文字列は、''(シングル)を利用する。

3.命名規約
id,classの付け方
　・classはcssで利用する。
　・idはjsで利用する。
　・jsの関数名はキャメルケースとする。
　 function functionName(){ … }

ファイル名の付け方
　・ファイル名の連結はスネークケースとする。
　・画像は[プレフィックス(配置),用途,サイズ]の順で記載する。
　　背景画像の例)「bg_header_960_150.jpg」

5.レスポンシブ
※別記事にて記載
web013 RWD(Responsive Web Design)の考慮ポイント - ねこきっくぱんちのメモ帳

6.対応ブラウザ
・Chrome,Firefoxの２つとする。

■参考サイト
コーディング規約を作ろう | Webクリエイターボックス
 新人Webデザイナーの私が、1年目で指摘されたことを振り返る[コーディング編] - IT系女子ログ
 見やすいコードでストレスなくコーディング。きれいなコードの書き方 | SOKUTAKU

プログラマのための言語別コーディング規約まとめ | Web活メモ帳
 「Google HTML/CSS Style Guide」を適当に和訳してみた | REFLECTDESIGN