【HTML、CSS、jQuery】コーディングする時に意識していること

概要

この記事では私が普段コーディングを行う時に意識していることをまとめようと思います。
言語としてはHTML、CSS、JavaScript（jQuery）を使用する場合を想定しています。

HTMLについて

各ページの見出しレベルを意識する

HTMLには見出しタグとしてh1～6が用意されています。
こちらが適切に設定されるように心がけています。

• トップページはメインビジュアルのキャッチフレーズかヘッダーのロゴをh1とする
• 下層ページについてはページタイトルをh1とする
• ページ内の各セクションにタイトル的なものがある場合はh2とする
• h3以降はデザインを見て付けられそうな場合は設定する

各要素の意味を考えてタグ付けする

• 通常のリストはul、番号付きリストはolを用いる
• Clickableな要素はbuttonで作る
• …etc

統一感のあるクラス名を付ける

• BEM、ケバブケースなど命名規則を決めてそれに乗っ取りクラス名を付ける
• 同じ単語で省略しないものと省略するものが混ざらないようにする（textとtx、txtなど）

CSSについて

汎用性のあるスタイルを作る

• 基本的にセレクタは単一として、親要素や子孫要素の存在に束縛されないようにする

.Hoge .Fuga {
  ～スタイル～
}

は極力使わず

.Hoge {
  ～スタイル～
}

.Fuga {
  ～スタイル～
}

とする

• セレクタにはHTMLタグを可能な限り使用せず、クラス名を用いる（HTMLタグが変わっても同じスタイルが当たるようにする）

a {
  ～スタイル～
}

ではなく

.HogeLink {
  ～スタイル～
}

とする

色の管理

• カラーについてはSassかCSSの変数を用いて、サイト内にどのような色が使用されているか把握しやすいようにする

数値の単位

• font-sizeはrem、余白はpxを使うなど最初に単位についてルールを決めてそれに乗っ取りコーディングをする

jQueryについて

汎用性のある処理を作る

• DOMを操作する場合、セレクタにCSSなどで使用している属性を使わない（クラス名で参照したい場合、「JsSample」のような専用のクラスを付ける）

なるべく軽量な処理になるように意識する

• 繰り返し処理を行う場合、jQueryのeachではなくJavaScriptネイティブのforなどを使う
• 同一のjQueryオブジェクト（$(～)）を複数回使用する場合は変数に詰める

if($(‘.JsHoge’).hasClass(‘Test’)) {
  $(‘.JsHoge’).removeClass(‘Test’);
}

ではなく

const hoge = $(‘.JsHoge’);
if(hoge.hasClass(‘Test’)) {
  hoge.removeClass(‘Test’);
}

とする

• イベントを設定する時に同一の処理を複数のDOMに付与する場合は、イベントデリゲートを利用する

$(‘.JsHoge’).on(‘click’, function() {
  ～処理内容～
})

ではなく

$(document).on(‘click’, ‘.JsHoge’ function() {
  ～処理内容～
})

とする

• スクロール系の処理を作る時にscrollイベントではなくIntersection Observerで作れる場合はそちらを利用する
• リサイズ系の処理を作る時にresizeイベントではなくmatchMediaで作れる場合はそちらを利用する