html、css書き方ルール〜Google HTML/CSS Style Guideとairbnbを元にざっくりまとめ〜


自分の参照用に

全共通事項

  • リンクを読み込むときはできるだけ’https’を利用する(httpsの省略もだめ)
  • インデントはスペース2つにする Tabキー使わない
  • 全てのコードは小文字で書く。大文字NG (cssの色指定特に注意)
  • htmlのテキスト(pタグ内に書くやつとか)の行末に余分な空白く付けない
  • TODOコメントつけるとき,
  • ‘TODO’キーワードだけを使う。#TODOとか@TODOとか他の記号付けない

HTMLを書くときの注意点

  • <!DOCTYPE html>つけること
  • void要素は/で閉じない <br />とか
  • 目的に応じたhtmlタグを使用する ex)見出しにはh要素、アンカーにはa要素
    W3C HTML validatorなどのツールを使用してテストする
  • メデイアについて必ず他のアクセスを提供する。視覚障害のあるユーザーにも分かりやすくするために(imgタグにはalt属性も書いとくなど)
  • html、css, scripファイルは別のファイルに書くこと。htmlからcssやscriptへのリンクはなるべく減らせるよう1つにまとめること。 (htmlファイルの修正コストの方が大きいため)
  • utf-8において特殊文字の実体参照はなるべく少なくする。HTMLで特別な意味を持つ”<“や “>や “&”には使用する
    特殊文字変換サイトhttps://tech-unlimited.com/escape.html
  • https://html.spec.whatwg.org/multipage/syntax.html#syntax-tag-omission
  • stylesheetとscriptを読み込むとき、linkタグのtype属性は省略する
  • class=””とかには、必ずダブルクォーテーションを使う
  • (任意)あまりにも長いコードは改行する
    ex)一つのpタグにclassがたくさんついていたり他属性もついていて長いとき
  • (任意)タグを省略する 省略できるタグの種類

CSS を書くときの注意点

  • 全体に共通すること
    • 適切なcssを書く。W3C CSS validatorなどのツールを使用してテストする
    • コメントはブロックコメント(/* */)でなくラインコメント(//)を使う
  • セレクタを指定するとき、
    • タイプセレクタはできるだけ使わない。ex) ul#idname やdiv.errなど 
    • class, id名の単語と単語の間は必ずハイフン(-)で区切る
      ※2つの単語を区切らずに繋げてはいけない。(キャメルケース、スネークケースNG)
    • id属性は使わない
  • プロパティを指定するとき、
    • アルファベット順に書く(prefixは例外)
    • セレクタ、コロンの後ろにスペースを一つ入れる 
//NG
.class{
    color:#ccc;
}
//OK
.class {
   color: #ccc;
}
  • 複数のセレクタを指定するとき、改行する
h1, h2{
...
}

//OK
h1,
h2 {
...
} 
  • ルールとルールの間は1行開ける
a { 
...
}

.btn {
...
}
  • 属性セレクタやプロパティ値の引用符にはシングルウクォーテーション(’)を使う。URIにはクォーテーションを付けない。
/* Not recommended */
@import url("https://www.google.com/css/maia.css");

html {
  font-family: "open sans", arial, sans-serif;
}
/* Recommended */
@import url(https://www.google.com/css/maia.css);

html {
  font-family: 'open sans', arial, sans-serif;
}
  • ショートハンドプロパティを使う 参照ショートカット
  • 0の後に単位は不要 NG) 0px
  • 小数点の初めの数字は省略する ex) .8s
  • 色指定 できれば3文字に省略する ex) #eebbcc → #ebc
  • borderがないスタイルにはnoneでなく0を使う ex) border: 0;

SCSSの注意点

  • 変数の名前にはダッシュ(-)を使用する(キャメルケースやスネークケースNG)
    例外として、接頭辞として同じファイル内でのみ使われる変数はOK ex)$_my-variable
  • プロパティを書く順番
    1. 通常のプロパティ
    2. @include
    3. ネスト(ネストされたスタイルを宣言する前に1行空ける)
  • @extendはあまり使わない。特にネストしてるときは注意。後々セレクタの順番を変更してしまい問題になるリスクあり。
  • ネストは2階層までに収める
  • 決してIDセレクタはネストさせてはいけない!絶対に


コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です