コーディング規約を見る

飽きっぽいのでいろいろ手をつけては放置しています。
困る。
初心に帰って個人サイトでも作ってみたいなーと思いましたが、運営していた頃からもう10年以上経っているので、htmlの書き方も古臭そう。
で、有名企業のコーディング規約を見てみる。それであっているのかわからないけど。
google翻訳とか拙い読解力なので正確さは微妙です。

Googleのコーディング規約

HTML

HTML5を使う
XHTMLには使わない。閉じタグは<br />ではな</br>を使う
有効なHTMLを使う
W3Cが標準化しているタグを使う。
用途にあったタグを使用する
pタグは見出し、aタグはアンカーなど。
具体的な例には、div要素に付与したonclickイベントで画面遷移関数を呼ぶ、ではなく、aタグのhrefで遷移先を設定する、というような記述。
マルチメディアでのアクセスを考慮する
画像や動画、アニメーションオブジェクトなどには、代替の要素を用意しておく。
alt属性を用いるなどアクセシビリティを考慮する。
構造とスタイルとスクリプトの分離
構造(マークアップ),スタイル(デザイン),スクリプト(動作)を分離する。
また、できるだけ少ないリンクでスタイルやスクリプトを参照する。メンテナンスのしやすさを考慮する。
エンティティ文字を使わない
同じ文字コードで書かれているのだから不要。HTML上で特別な意味を持つ文字<などを除く。
省略可能なタグは使用しない(推奨)
html5で省略可能なタグHTML Standard があるのでそれは省略する。(ファイルサイズなどの観点から)
ただし再考の余地がある…みたいなことらしい。
type属性は使用しない
cssやjavascriptのtype属性は使用しない。HTML5で暗黙で指定されているため。
要素ごとに改行しインデントをつける
長い行は改行する
継続業はスペース4つ分字下げする。
シングルクォートではなくダブルクォートを用いる

CSS

有効なcssを使う
W3Cが標準化しているものを使う。
cssのクラスやIDには意味のある名前をつける
cssのクラスやIDの名前はできるだけ短く、意味がわかるほどには長くする
タイプセレクタを用いない
ul#exampleとかdiv.errorとかのように要素を指定してスタイルを適用する方法は使わない。
ショートハンドプロパティで書く
一つの定義でかけるものはまとめて書く。
padding-top: 0; padding-right: 1em; padding-bottom: 2em; padding-left: 1em; とかではなくpadding: 0 1em 2em; みたいな事。
0の直後の単位は省略する
先頭の0は省略する
0.8em ではなく .8em
プレフィックスをつける
競合しないようにアプリケーション固有の接頭辞をつける。
検索や置換にも有用。
IDやクラス名の区切り文字は「-」
cssハックの前に別の方法を考える(推奨)
定義はアルファベット順で記載する
ブロック要素はインデントする
宣言の終了(;)を忘れない
プロパティの後ろにスペースを入れる
font-weight:bold;ではなくfont-weight: bold;

ブロック要素の区切り

 #hoge{
  margin-top: 1em;
}

#hoge
{
  margin-top: 1em;
}

ではなく

#hoge {
 margin-top: 1em;
}

セレクタ要素の区切り

 a:focus,a:active {
      position: relative; top: 1px;
}

ではなく

 a:focus,
a:active {
     position: relative;
     top: 1px;
}

定義の区切りは一行あける
ダブルクォートではなくシングルクォートを使用する

13note.

なんか調べたりまとめたり感想言ったりする語彙力不足及び眠気と戦うブログ

コーディング規約を見る

Googleのコーディング規約

HTML

CSS