コーディングガイド by @mdoから多くを抜粋・改変しています。
- 半角スペース2個のソフトタブを使用する
- 行末の空白を自動消去する
- 文字エンコーディングをUTF-8にする
- 新しい行を最後に追加する
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>Internet Explorerは <meta> タグを使った互換モードをサポートしていて、IEのどのバージョンでサイトが表示されるべきかを指定できます。特に特別な理由がないのなら、edge modeを使って、最新バージョンを指定します。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">素早く、そして簡単に適切なレンダリングがされるよう文字エンコードを宣言します（普通はUTF-8）。こうすることで、HTMLコードの中で特殊文字を使わなくても良くなります。
<head>
<meta charset="UTF-8">
</head>HTML5 の仕様で、CSS ファイルや JavaScript ファイルのロードに text/css や text/javascript といった type は必要ありません。
<!-- 外部CSS -->
<link rel="stylesheet" href="code-guide.css">
<!-- インラインCSS -->
<style>
/* ... */
</style>
<!-- JavaScript -->
<script src="code-guide.js"></script>HTMLの要素は可読性の向上のために、適切な順序で記述します。
classid,namedata-*src,for,type,href,valuetitle, alt`aria-*, role`
class は最も再利用される属性なので最初に書きます。id はより詳細で、最小限の使われ方（ページ内のブックマークとか）をするべきなので、二番目に書きます。
<a class="..." id="..." data-modal="toggle" href="#">
Example link
</a>
<input class="form-control" type="text">
<img src="..." alt="...">ブーリアン型の属性は値を必要ありません。XHTMLでは値を要求されますが、HTML5にそのような仕様はありません。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>可能な限り、不要な親要素を作らないこと。多くの場合リファクタリングが必要になりますが、コードを削減できます。
<!-- あまり良くない例 -->
<span class="avatar">
<img src="...">
</span>
<!-- 良い例 -->
<img class="avatar" src="...">文書の見出しは、HTML においては <h1> ~ <h6> で表現します。適切に構造化された HTML 文書では情報の関係性や順序が担保され、支援技術の見出しジャンプ機能などを利用出来て、SEO におけるメリットが見込め、文書としての品質が向上します。
- 記事の主題には見出し1
<h1>を用いる - 見出しレベルをジャンプしない（
<h1>の次に<h3>が来るとか） - 見出しレベルは見た目の大きさではなく、文書構造によって決める
Wordpress のビジュアルモードでは、文字入力モードを「段落」、「見出し1」、「見出し2」、「見出し3」、「見出し4」、「見出し5」、「見出し6」から切り替え可能です。これが HTML （テキストモード）での <p>、<h1>、<h2>、<h3>、<h4>、<h5>、<h6>、に該当します。
HTML で画像の表示に用いる <img> ですが、 alt 属性の内容は重要です。スクリーンリーダーの利用時に、画像がフォーカスされると alt の内容が読み上げられます。Wordpress で画像をアップロードすると、alt の初期値にはファイル名が割り当てられます。これがスクリーンリーダーで読み上げられても読み手にとっては辛いです。
- 画像
<img>のalt属性には代替（alternative）となるテキストを入れる- テキストでは表現されていない特別な情報を伝えているのであれば相応の代替テキストを指定する
- 読み上げられなくても文意が通じるのであれば
alt=""を指定する
- 代替テキストは「画像そのものを説明しているか」ではなく、「画像の代替コンテンツとして配置されたときに文意が成り立つか」で考える
alt の値を指定するには、画像のアップロード時に「代替テキスト」に入力するか、HTMLを直接編集してください。
- インデントには半角スペース2個分のソフトタブを使用する。これが全ての環境で全く同じように見せる唯一の方法
- セレクタをグループ化するとき、1行毎に1つのセレクタを記述する
- 可読性のために、開き波括弧の前に1つの半角スペースを入れる
- 閉じ波括弧は新しい行に記述する
:のあとに1つの半角スペースを入れる- 各宣言は1行毎に記述する。エラーがより的確に表示されるようになる
- 全ての宣言をセミコロンで終わらせる。最後の宣言についてセミコロンは省略できるけど、省略しない方がエラーが起き難い
- コンマ区切りを使う値には、コンマの後に半角スペースを1ついれること（例:
box-shadow） rgb()、rgba()、hsl()、hsla()、rect()の値については、コンマの後にスペースを入れないこと。これは色の値（コンマ無し）とプロパティの値（コンマ有り）の違いを簡単に表してくれる- 小数点以下の値を指定する時、1の位が0なら省略する（例:
0.5ではなく.5。-0.5pxではなく-.5px） - hex型の値は全て小文字で指定する。例:
#fff。小文字は大文字よりもユニークな形をしているから、ぱっと見で分かりやすい - 可能な場合は省略形のhex型の値を使う。例:
#ffffffではなく#fff - セレクタの値はクォートする。例:
input[type="text"] - 0の値には単位を指定しない。例:
margin: 0px;ではなくmargin: 0;
/* 悪い例 */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* 良い例 */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}省略形の宣言は、全ての値を設定する場合のみに留めること。一般的な省略形の宣言は、
paddingmarginfontbackgroundborderborder-radius
多くの場合、全ての値を設定する必要はありません。例えばHTMLのヘッダーはほとんどの場合上下のマージンしか必要としないので、上書きする場合もその二つだけを上書きすれば済みます。過度な省略形の活用は、よりしょぼいコードと予期しない副作用を生み出すことが多いです。
/* 悪い例 */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* 良い例 */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}Mozillaの開発者ネットワークに素晴らしい記事がります。省略形のプロパティはその記法と挙動に明るくない人にとって良い参考になります。
命名規約については .Block__Element.-modifier {} のように Chainable BEM で記述する。要素として成立するものは大文字で開始し、それ以外の modifier は小文字開始です。modifier を短く定義できるので chain しやすくなっています。
<div class="Media -pattern">
<picture class="Media__Image -oval"></picture>
<div class="Media__Body"></div>
</div>
<style>
.Media {}
.Media.-pattern {}
.Media__Image {}
.Media__Image.-oval {}
.Media__Body {}
</style>BEM で書いていくにあたり、Sass などの CSS プリプロセッサを使うと短く記述できるというメリットがあります。しかし、引き換えにパッケージへの依存やビルドプロセスが増えるので、そのために導入するのは過度であるという議論があり見送っています。
<link> に比べると、 @import は遅く、ページリクエストが追加され、予期しない問題を招く。代替の手法を活用しよう。
<!-- link要素を使うこと -->
<link rel="stylesheet" href="core.css">
<!-- @importsは避けよう -->
<style>
@import url("more.css");
</style>