見出し画像
Photo by toyslab

CSS・HTMLの大文字・小文字の使い分けと区切り文字（ハイフンとかアンダースコアとか）

bivo

結論から

  • 大文字・小文字の使い分け・・・全部小文字推奨

  • 区切り文字・・・ハイフンだけ推奨（他の記号は使わない）

でもチームのルールが決まってるならそちらに従ってください。
順番に見ていきます。

大文字・小文字の区別

HTML、CSSどちらも大文字・小文字を使えますが

  • HTMLのマークアップ・・・区別されない（＊）

  • CSSのセレクターやプロパティ名・・・区別されない（＊）

（＊）ただし、HTML の属性 "id" や "class" の値、フォント名、URI の大文字・小文字、CSSカスタムプロパティの変数名などは区別されます

大文字・小文字の使い分け

CSSに大文字を一部使っているサイト様もありますし、
基本的にはサイトごとにルールが統一されていればどちらでも問題ないみたいです。
じゃあ1人でコーディングするときはどうしたらいいでしょうか？
わたしはGoogle様にすがることにします。

Google HTML/CSS Capitalization

すべてのコードは小文字でなければなりません。これは、HTML要素名、属性、属性値（text/CDATAを除く）、CSSセレクター、プロパティ、プロパティ値（文字列を除く）に適用されます。

Google HTML/CSS Style Guide（日本語訳）

  • ただし、<!DOCTYPE html>のDOCTYPEは大文字

  • alt属性の値は画像の代替テキスト（文字列）なので大文字や日本語でもOK

<!-- 非推奨 -->
<A HREF="/">Home</A>
<!-- 推奨 -->
<img src="google.png" alt="Google">
/* 非推奨 */
color: #E5E5E5;
/* 推奨 */
color: #e5e5e5;

IDとクラス名の区切り文字

ハイフン「-」とアンダースコア「_」が使われることが多いのでこの2つを比較します。

  • ハイフンは、複数単語を結合した意味

  • アンダースコアは、アンダースコア含め1つの単語として扱われる

そのため、エディターなどでクラス名をダブルクリックしたときに

  • ハイフンは、ハイフンで区切られた所まで選択される

  • アンダースコアは、アンダースコア含めすべて選択される

となります。他にも

  • ハイフンは、エディターなどで補完候補が区切られた単語毎に出る（一発で出ない）

  • ハイフンは、「属性セレクター[attr|=value]」が使える

など、一長一短で評価が分かれるようです。
Google様はというと

Google ID and Class Name Delimiters

IDやクラス名の単語はハイフンで区切ります。
セレクター内の単語や略語は、理解しやすくスキャンしやすくするために、ハイフン以外の文字で連結しないでください。

Google HTML/CSS Style Guide（日本語訳）
/* 非推奨: “demo” と “image”を区切っていない */
.demoimage {}

/* 非推奨: ハイフンではなくアンダースコアを使っている */
.error_status {}
/* 推奨 */
#video-id {}
.ads-sample {}

ということで、ハイフン推奨なようです。

ただJavaScriptなどではハイフンを使うとエラーになるため、
JavaScriptからは、クラスではなくカスタムデータ属性で要素を取得すると良いようです。

この記事が気に入ったらサポートをしてみませんか？