ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

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はインデントを行う。ただし1行で済む場合は1行に納める。
 ・インデントは半角2個分とする。

カラーコード
 ・全て小文字(#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」


4.

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

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



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

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