プログラム言語は一般的にコーディング規約というものが存在するのはご存知かと思いますが、HTMLとCSSにもコーディング規約が存在します。
今回、他の方のHTML/CSS コーディング規約を下敷きにしつつ、自分が今まで経験してきたことを踏まえたMyコーディング規約を作りましたので、公開してみることにします。
対象
- 特に絞ってないですが、あえて言うと「システム開発の過程でコーディングもたまにするプログラマ」を想定して書いてます
前提
- HTML/CSSコーディング規約はあくまで規約であり、絶対に遵守しなければならないというわけではありません
- 大方は一般的なコーディング規約と同じですが、一部、一般的なコーディング規約と異なるところがあります
コーディング全般
インデント
- 半角スペース2つ(or4つ)
- 一般的には2つのようですが、4つでも問題ないと思います
- 要するに可読性が失われないことが大事です(個人的にはどっちでも問題ないかなと思います)
1行1要素
- 可読性を担保するために1行に書く要素はなるべく1つに留める
【HTML】
<!-- Recomended -->
<ul>
<li>itemA</li>
<li>itemB</li>
</ul>
<!-- Not Recomended -->
<ul>
<li>itemA</li><li>itemB</li>
</ul>
【CSS】
/* Recommended */
.selector {
font-size: 1.2em;
color: #A1A1A1;
}
/* Not recommended */
.selector {font-size: 1.2em;color: #A1A1A1;}
ただし、下記の場合のようにaタグの中にspanタグが入る程度は許容範囲(個人的には)
【HTML】
<!-- Recomended -->
<p>
<a href="#">Hello <span class="world">World</span>. Hello Japan.</a>
</p>
末尾スペース
デザイン崩れの元になったりするので、末尾に半角スペースなどの空白を残さないようにする
※下記の例では「_」が半角スペースにあたる。
<!-- Recomended -->
<p>Hello.
<!-- Not recomended -->
<p>Hello_
※エディタ等の設定で半角スペースや全角スペースを表示するようにしてもいいかもしれない(半角スペースはともかく、全角スペースはプログラムの不具合にも直結するので、しておいた方がいいかも)
HTMLコーディング規約
バージョン
- HTML5を使用する
Doctype宣言
- ブラウザによっては表示違いが出ることもあるため必ず宣言をする
-
<!DOCTYPE html>
属性の順序
- 以下の順序に沿って属性を記述していく
- id属性
- class属性
- 他属性
- style属性
Style属性
- インラインスタイルやスタイリングタグを極力使用しない
- 理由はメンテナンス性と可読性が著しく低下するため
<!--Not recomended-->
<p style="color: red">
<big>
<center>
<font>
<tt>
クオテーションマーク
シングルクオテーションマーク(‘’)ではなく、ダブルクオテーションマーク(“”)を利用する
<!-- Recommended -->
<a class="maia-button maia-button-secondary">Sign in</a>
<!--Not recomended-->
<a class='maia-button maia-button-secondary'>Sign in</a><big>
段落とヘッダー
-
<p>タグの中に<h1>などのヘッダーを使用しない
<!--Redomended-->
<h1>Header</h1>
<p>lorem ...</p>
<!--Not redomended-->
<p>
<h1>Header</h1>
lorem ...
</p>
- ブロック要素の中にブロック要素なのだから文法的には間違っていない気がするが、本文に使われる
pタグの中に見出しタグが入っていることが適切ではないのである - 考えられるのは、可読性が下がる、
h1タグに予期せぬcssがかかる可能性がある、などである
CSSコーディングスタイル
プロパティの後にスペースを入れる
可読性を確保するため
/* Recommended */
div {
color: red;
margin: 16px;
}
/* Not recommended */
div {
color:red;
margin:16px;
}
カッコ開きの位置
カッコ開きの前には常に半角スペースを入れる。(可読性を確保するため)
/* Recomended */
.selector {
propaty: value;
}
/* Not ecomended */
.selector{
propaty: value;
}
.selector
{
propaty: value;
}
セレクタ毎に行を変える
可読性を確保するため
/* Recomended */
.class1,
.class2,
.class3 {
color: red;
}
/* Not ecomended */
.class1, .class2, .class3 {
color: red;
}
ルールの分離
ルールとルールの間には１行スペースを入れる(可読性を確保するため)
/* Recomended */
.class1 {
margin: 0;
}
.class2 {
margin: 0;
}
/* Not Recomended */
.class1 {
margin: 0;
}
.class2 {
margin: 10px;
}
セクションをコメントに記載する
可読性、メンテナンス性の向上のため
/* Header */
.header {
margin: 5px 10px;
}
/* Content */
.content {
margin: 0;
}
!importantはなるべく使用しない
- メンテナンス性が低下するため
idによるスタイル指定をしない
可読性を確保するため
/* Recomended */
.content {
width: 800px;
margin: auto 0;
}
/* Not ecomended */
#content {
width: 800px;
margin: auto 0;
}
クラス名に英語を利用する
- メンテナンス性、可読性の向上のため
- 内容が理解しがたい場合は、日本語でコメントを入れる
/* Recommended */
/* 重要なもの */
.important {
}
/* Not recommended */
.juuyou {
}
省略可能な場合は省略する
- メンテナンス性、可読性向上のため
/* Recommended */
.mgs {}
.flg {}
/* Not recommended */
.message {}
.flag {}
HTMLエレメントに対してCSSを指定しない
- CSSはclassに記述する
- HTMLエレメントに適用すると影響範囲が大きくなり、打消しのCSSを記述する必要性が出てくる。結果的にCSSのコードが膨大になってしまうのを極力避けるべきである。
/* Recommended */
.content-text {
font-size: 1em;
text-align: left;
}
/* Not recommended */
.content p {
font-size: 1em;
text-align: left;
}
- ただし、特定のクラスがついたtableタグのtd要素等に対してcssを適用したりするのはこの限りではない
.content-table td {
color: #FFF;
font-size: 1em;
text-align: center;
}
制限されたCSSを書かない
以下のような特定のHTMLエレメント下においてのみ適用されるclassは書かない
/* Recommended */
.modal {text-align: left;}
.content {padding: 10px;}
/* Not recommended */
div.modal {text-align: left;}
p.content {padding: 10px;}
CSSプロパティはアルファベット順に記述する
メンテナンス性、可読性向上のため
/* Recommended */
.piyo {
background-color: #FFF;
color: red;
margin: 80px;
width: 800px;
}
/* Not recommended */
.piyo {
width: 800px;
margin: 80px;
color: red;
background-color: #FFF;
}
CSSプロパティはまとめない
- Marginやpaddingのプロパティをまとめるとかえって可読性が下がるため、プロパティはまとめない
- 一般的な規約だとまとめた方がいいとされるが、経験上、まとめない方がぱっと見て分かりやすいため、このような方針にいたった(多少cssに不慣れな人にも分かりやすいというメリットもある)
/* Recommended */
.hoge {
margin-bottom: 0;
margin-left: 0;
margin-right: 39px;
margin-top: 112px;
padding-bottom: 84px;
padding-left: 0;
padding-right: 0;
padding-top: 26px;
}
/* Not recommended */
.hoge {
margin: 112px 39px 0 0;
padding: 26px 0 84px;
}
色の指定はなるべく3桁表記に
色の指定が3桁表記可能ならば短縮する
/* Recommended */
.modal {color: #000;}
.content {color: #3b0;}
/* Not recommended */
.modal {color: #000000;}
.content {color: #33bb00;}
CSSのネストは深くしない
- ネストを深くすると、再利用性が下ってしまうため
- 特に、下記のような書き方は避けるべきである
/* Recommended */
.content-dog-hogetable td {
color: #3b0;
font-size: 1em;
font-weight: bold;
}
/* Not recommended */
.content .dog {
color: #3b0;
font-size: 1em;
}
.dog .hogetable td {
font-weight: bold;
}
- ↑上位のcssが適用されているので、その部分のcssのみならず、上位のcssまでも見なければならなくなる
汎用クラスは利用してもよい
- ただし多用は避けるべきである
- html要素にクラス名が多くなり、可読性が下がってしまうため
- 「ちょっとしたコーディングで、ちょっと調整したいだけなのにわざわざ専用のクラスを用意するのもなんだかなあ」というものに対して使うよい
PCのCSSとspのCSSは明確に分ける
レスポンシブにする際、PCとsp(とTable)のCSS、というよりブレイクポイント毎にCSSを分けておかないと、
思わぬ所でデザイン崩れが起きたりするので、明確に分けておくようにする
/* Recommended */
@media screen and (min-width:769px) {
.dog {
background-color: #000;
margin: auto;
width: 480px;
}
}
@media screen and (max-width:768px) {
.dog {
padding-left: 10px;
padding-right: 10px;
width: 100%;
}
}
/* Not recommended */
.dog {
background-color: #000;
margin: auto;
width: 480px;
}
@media screen and (max-width:768px) {
.dog {
padding-left: 10px;
padding-right: 10px;
width: 100%;
}
}
- 極端な例だが、上記のNot recommendedだとPC用の
background-color、marginがspにも適用されてしまう
クラスの命名ルールについて
人によってクラス名の付け方はまちまちですが、実は命名ルールなるものがCSSには存在します。
BEM
このあたりは自分も理解が浅いので、下記の記事を参考にされてみてください。分かりやすく解説されておられます
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
OOCSS
Bootstrapなどでも利用されている命名ルールです。こっちの方が馴染みがあると思います。これも下記サイトにて、BEMなどと一緒に解説されておられます
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
終わりに
プログラマの方でもコーディングする機会はたまにあるかと思います。そんな時、HTML/CSSのコーディング規約は役に立つと思いますので、是非活用してみてください＿(:3」∠)＿
参照サイト
Google HTML/CSS Style Guide (GoogleのCSSコーディング規約)
こんなHTMLとCSSのコーディング規約で書きたい
経験の浅いチームのためのHTML/CSSコーディング規約
CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
