福岡市でグロースハック、データ分析とサイト製作、webデザイン教育を行っています。

チーム作業でも個人作業でも役に立つ、コーディングルール

Webデザイン

2017年9月19日 火曜日

コーディングルールとは？

※この記事は2016年2月のエントリーを再編集・再掲載しています。

CSSでは構造と見た目の両方をデザインしなければならないために、その設計には多くのデザイナーが頭を抱えています。また、「表示速度」を求めるのか、「メンテナンス性」を重視するかでCSSの書き方が変わります。このサイトのコーディングルールは厳密に決めてはいませんが、以下のようなルールに基づいています。

メンテナンス性を重視したコーディングルール

HTMLに関するルール

（1）HTML5推奨です。
（2）埋め込みリソースからプロトコル表記（http:,https:）を省略します（ローカル環境でプレビューできなくなるので、その点は注意が必要です）。

<!-- NG -->
<script src="https://google.co.jp/js/lib/autotrack.js"></script>

<!-- OK -->
<script src="//google.co.jp/js/lib/autotrack.js"></script>

（3）半角スペース2つ分でインデントします。

<ul>
  <li><a href="/">home</a></li>   
  <li><a href="/about">about</a></li>  
</ul>

（4）HTMLタグの記述は小文字を使用します（alt属性など値が文字列の場合は除きます）。
（5）目的に応じたHTMLタグを用いてセマンティックに記述します。
（6）省略できるタグであってもなるべく省略しません。

<!-- NG -->
<!DOCTYPE html>
<title>This code is high maintenance.</title>
<p>OK GO!

<!-- OK -->
<!DOCTYPE html>
<html>
  <head>
    <title>This code is high maintenance.</title>
  </head>
  <body>
    <p>OK GO!</p>
  </body>
</html>

（7）CSSとJavaScriptのtype属性は省略します。

<!-- NG -->
<link rel="stylesheet" href="//www.google.co.jp/css/main.css" type="text/css">
<script src="//google.co.jp/js/lib/autotrack.js" type="text/javascript"></script>

<!-- OK -->
<link rel="stylesheet" href="//www.google.co.jp/css/main.css">
<script src="//google.co.jp/js/lib/autotrack.js"></script>

（8）ブロック要素・リスト要素・テーブル要素は改行してから記述し、それらの子要素にはインデントを入れます。

<span><em>Just</em>, the final answer.</span>

<ul>    
  <li>Fukuoka</li>    
  <li>Kumamoto</li>
  <li>Saga</li> 
</ul>

<table>
  <thead>
    <tr>
      <th>Miyazaki</th>
      <th>Kagoshima</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>¥15.00</td>
      <td>¥12.50</td>
    </tr>
  </tbody>
</table>

CSSスタイルに関するルール

（1）recet.cssではなくnormalize.cssを利用します（必要に応じてカスタマイズします）。
（2）スタイルシートの最初に目次を書き、目次に対応した見出しを書きます。

/*-------------------------------------------------------------
  ●   main(common) layout menu
  main-001. ページ全体
  main-002. 全体配置
  main-003. ヘッダー詳細
  main-004. ナビゲーション詳細
  main-005. パンくずリスト詳細
  main-006. メイン詳細
  main-007. ページトップ詳細
  main-008. フッター詳細
  main-999. その他

  ●   page layout menu
  page-001. 共通
  page-002. ホーム
  page-003. ブログインデックス
  page-004. ブログ投稿記事
  page-005. 中の人
  page-006. 各ページ
  page-007. お問い合せ
  page-404. 404 Error
  page-999. サイトマップ
-------------------------------------------------------------*/

/*-------------------------------------------------------------
  main-001. ページ全体
-------------------------------------------------------------*/
html {}
body {}
/*-------------------------------------------------------------
  main-002. 全体配置
-------------------------------------------------------------*/
.header {}
.navigation {}

（3）IDとクラス名には意味の分かる名前を使います。見た目を反映したものやそれが何を表しているか不可解な名前ではなく、要素の目的や役割を反映した名前を付けます。また、先頭に記号や数字は使いません。

/* NG: 意味が分からない */
#aee-1999 {}

/* NG: 見た目を表してる */
.button-red {}
.clear {}
.mt10 {}

/* NG: 先頭に数字や記号を使用している */
.01title {}
._scope {}

/* OK: 役割を表してる */
#gallery {}
#login {}
.video {}

/* OK: 汎用的な名前 */
.aux {}
.alt {}

（4）IDとクラス名には単語をなるべく省略しないで使います。ページ-位置-役割_タグ_数字の順で定義します。ページ共通のクラスに関しては、位置-役割_タグ_数字または、役割_タグ_数字となります。

/* NG */
#tit {}
.atr {}
.ntf {}

/* OK */
#header-title {}
#home-header-title_h2 {}
#about-sidebar-title_h3_2 {}
.footer-author {}
.notification {}

（5）IDとクラス名にタイプセレクタは記述しません。パフォーマンスを考慮して不要な子孫セレクタも記述しません。

/* NG */
ul#menu {}
div.notification {}
div.error table tbody tr td {}

/* OK */
#menu {}
.notification  {}
.error td {}

（6）違うクラス名で、構成するプロパティがまったく同じでも、後で変更が入りそうなものである場合は分けます。

/* NG */
.header-detail_dt,
.header-detail_dd {
  float: left;
  height: 120px;
  width: 400px;
}

/* OK */
.header-detail_dt {
  float: left;
  height: 120px;
  width: 400px;
}
.header-detail_dd {
  float: left;
  height: 120px;
  width: 400px;
}

（7）可能な限りショートハンドでプロパティを書きます。

/* NG */
border-top-style: none;
font-family: georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

/* OK */
border-top: none;
font: 100%/1.6 georgia, serif;
padding: 0 1em 2em;

（8）値が「0」なら単位を省略します。

margin: 0;
padding: 0;

（9）小数点の頭の「0」は省略しないで書きます。

/* NG */
font-size: .85em;

/* OK */
font-size: 0.85em;

（10）url()での指定において、””（ダブルコーテーション）や”（シングルコーテーション）などのURI値の引用符は省略しないで書きます。

/* NG */
@import url(//www.google.com/css/main.css);

/* OK */
@import url("//www.google.com/css/main.css");

（11）CSSハックは可能な限り使用しません。

CSS書式に関するルール

（1）プロパティはアルファベット順に記述します。

#home-wrapper {
  background: #ffffe6;
  border-top: 8px solid #000033;
  margin: 0 auto;
  min-width: 320px;
  overflow: hidden;
  position: relative;
  -webkit-transition-property: all;
  -webkit-transition: 0.2s linear;
  -moz-transition-property: all;
  -moz-transition: 0.2s linear;
  -ms-transition-property: all;
  -ms-transition: 0.2s linear;
  transition-property: all;
  transition: 0.2s linear;
  width: 100%;
  z-index: 99;
}

（2）半角スペース2つ分でインデントします。

.test {
  display: block;
  width: 100px;
}

（3）すべてのプロパティの終端はセミコロンを書きます。

/* NG */
.test {
  display: block;
  width: 100px
}

/* OK */
.test {
  display: block;
  width: 100px;
}

（4）すべてのプロパティ名の終端にはスペースを入れます。

/* NG */
.test {
  display:block;
  width:100px;
}

/* OK */
.test {
  display: block;
  width: 100px;
}

（5）別々のセレクタとプロパティは改行して書きます。

/* NG */
.test a:hover, .test a:active {
  color: #ff0000;text-decoration: underline;
}

/* OK */
.test a:hover,
.test a:active {
  color: #ff0000;
  text-decoration: underline;
}

（6）{}の位置は統一します。

/* NG */
.test { margin: 0;padding:1em 2em; }
.test-title, .test-garelly
{
  color: #0033cc;
  background-color: #cc0066;
}

/* OK */
.test {
  margin: 0;
  padding: 1em 2em;
}
.test-title, .test-garelly {
  color: #0033cc;
  background-color: #cc0066;
}

最も大事なのは、コーディングした人以外が見ても理解しやすいように「一貫性」を保つことです。

BGM：創聖のアクエリオン by AKINO

photo by すしぱく at pakutaso

send mail