Googleがハイフンって言ってるからハイフンって、そんな安直な考えで本当に良いの? CSS 「id」「class」名 に関する調査履歴 2

コーディングルール命名規則

目次一覧

 状態:試行錯誤履歴  閲覧数:4,429  投稿日:2013-03-28  更新日:2019-10-03
前回の続き

「Google」VS「Apple」/ Googleは、CSSの「id」「class」名も評価しているの?

CSS「id」「class」名の区切り文字は、URLの区切り文字と同じ考え方をするの?

区切り文字がハイフン (-) だと何が駄目なの?

CSS区切り文字として、ハイフン採用


「Google」VS「Apple」/ Googleは、CSSの「id」「class」名も評価しているの?

 閲覧数:363 投稿日:2013-03-28 更新日:2019-09-30 

「Google」VS「Apple」


面白い検証ページを発見
アップルのHTMLコーディングについて(Google ルールと比較してみた)
※Appleが「コーディングルール」を公表しているわけではなくて、「Apple のHTML5サイトのソースを見比べてみました」なので注意は必要…
私がGoogle のガイドラインを見ていて「ん?」って感じた部分が、Apple の方のコードにはあまり無い。
まあ、そういうことなのかもしれませんね
そう書いてあるのだが、調査している肝心の「id class 命名時の繋ぎ方」部分については、正直微妙な結果に…
Google → ハイフンで繋ぐ
Apple → ハイフン・アンダーバー・キャメルケースの混在
いくら何でも混在はマズいと思うのだが…

月日も経過してるし、もしかしたら、何かの間違いかもしれないので、自分でも実際に確かめてみよう
<ul id="globalnav" role="navigation">
<li id="gn-apple"><a href="/"><span>Apple</span></a></li>
<li id="gn-store"><a href="http://store.apple.com/"><span>Store</span></a></li>
<li id="gn-mac"><a href="/mac/"><span>Mac</span></a></li>
<li id="gn-ipod"><a href="/ipod/"><span>iPod</span></a></li>
<li id="gn-iphone"><a href="/iphone/"><span>iPhone</span></a></li>
<li id="gn-ipad"><a href="/ipad/"><span>iPad</span></a></li>
<li id="gn-itunes"><a href="/itunes/"><span>iTunes</span></a></li>
<li id="gn-support" class="gn-last"><a href="/support/"><span>Support</span></a></li>
</ul>

<div class="HTML5Pane pane_1" id="pane_1">
<a href="/html5/showcase/video/" class="trigger" id="sc_video">
<img src="http://images.apple.com/html5/images/showcase_video.jpg" width="293" height="210" alt="" />
<span class="caption">Video</span>
</a>
</div>

・……
・これはあれなんだよ。親要素は「キャメル」、子要素は「ハイフン」、divクラスは「アンダーバー」という、もの凄く高度な何かのテクニックなんだよ。きっと…
・駄目だわ。それだと説明が苦し過ぎる…
・とりあえず、ここは見なかったことにしよう……

Googleは、CSSの「id」「class」名も評価しているの?


争点
結局、この点がはっきりしないと論じることが出来ない

Googleが言っていること
ハイフンはセパレータとして認識される
・「apple-mac」 … appleとmacを分けたキーワードとして認識される
・「apple_mac」 … applemacというキーワードになってしまう

認識する、って誰が?
・Chromeが?
・それとも、Googleクローラが、そう認識するのか?
・よしんば、Googleクローラがそう認識するとしたら、それが、サイトに与える影響には、どのようなことが挙げられるの?

CSS「id」「class」名の区切り文字は、URLの区切り文字と同じ考え方をするの?

 閲覧数:324 投稿日:2013-03-28 更新日:2019-09-30 

Google公式見解


URL に区切り記号を使用します。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア (_) ではなくハイフン (-) を使用することをお勧めします
Google と相性の良い URL の作成

URLについては、何となく理解できる
きっと、Googleクローラの仕様というべきものなのだろう

だけど、CSSについてはどうなんだろう?
あくまでも、コーディングルールとしての指針をGoogleが提示した、というだけの話なの?

区切り文字がハイフン (-) だと何が駄目なの?

 閲覧数:352 投稿日:2013-03-28 更新日:2019-09-30 

ハイフン (-) デメリット


ダブルクリック でセレクタをダイレクトに(一度に)選択できない

実際に試してみる
・「Dreamweaver」もそうだし「秀丸」でも、セレクタをダイレクトに選択できない
・これは確かに不便

CSS区切り文字として、ハイフン採用

 閲覧数:340 投稿日:2013-03-28 更新日:2019-09-30 

ハイフン採用


最終的に「ハイフン採用」決定

理由


・「ダブルクリック で一度に選択できない」とか、そんなものは単なる制作サイドの都合に過ぎない
・「Google」が示したコーディングルールが100%正しいとは思わないが、それを覆すだけの材料を持ち合わせていないのも、また事実
・「ハイフン」「アンダーバー」「ローワーキャメルケース」「区切りなし小文字」。どれでも同じなら、「Google」が推奨している「ハイフン」を不採用にする理由は見当たらない
・ましてやその選考過程において、「制作サイドの都合」は考慮されるべきではない


続きはこちら


CSS 「id」「class」名 に関する調査履歴 1

OOCSS



類似度ページランキング
順位 ページタイトル抜粋
1 CSS 「id」「class」名 に関する調査履歴 1 41
2 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
3 Illustrator CS2 でファイル名に「更新済み」を追加しない 32
4 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 32
5 ページで使用されている「id名」「class名」をChromeで取得したい   31
6 「position:absolute;」が分からなくなったときに見るエントリー 29
7 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 29
8 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
9 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 29
10 「Google Chrome」のリリースノート(更新履歴)は公開されている 28
11 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 28
12 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 27
13 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 27
14 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 26
15 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない 26
16 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 26
17 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 26
18 「PhotoShop CS3」 と、「Vieas」 の違い 26
19 画像を保存させないようにするjQueryプラグイン「jquery.dwImageProtector.js」 26
20 テーブル枠線がどうしても消えない時は「border-collapse: collapse;」 26
2021/7/28 10:38 更新
週間人気ページランキング / 7-21 → 7-27
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 47
2 画面キャプチャ | Chrome 拡張機能(ブラウザ) 32
3 血の色 / #b30000 / #360800 / #ff0000 | 色 30
4 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 26
5 RGBの種類 / ビットカラー | RGB(色) 17
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 16
7 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 15
7 HSLとHSVの違い | 色変換(色) 15
8 使用していないCSSをチェックする、標準的な方法を知りたい | CSS 14
9 Design 0 12
9 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 12
10 「bgcolor」「background-color」「background」の違い | CSS 10
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 9
12 親要素の背景色を、CSSで打ち消したい | CSS 7
12 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 7
12 キャラクター無料着せ替えジェネレーター Rinmaru Games / オンラインサービス | イラスト素材(デザイン) 7
13 Chromeブックマークの不満な点 | Chromeブックマーク(ブラウザ) 6
13 100/7%ではなく100%/7。(100/7)%ではなく(100%/7) | CSS 6
13 ログイン 6
13 グラデーション練習 | Fireworks 8(Fireworks) 6
2021/7/28 1:01 更新