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

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

目次一覧

 状態:試行錯誤履歴  閲覧数:5,163  投稿日: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」名も評価しているの?

 閲覧数:545 投稿日: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の区切り文字と同じ考え方をするの?

 閲覧数:516 投稿日: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が提示した、というだけの話なの?

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

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

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


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

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

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

 閲覧数:550 投稿日: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 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 32
4 Illustrator CS2 でファイル名に「更新済み」を追加しない 32
5 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 32
6 ページで使用されている「id名」「class名」をChromeで取得したい   31
7 「position:absolute;」が分からなくなったときに見るエントリー 29
8 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 29
9 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81(Official Build) (64 ビット) 29
10 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 29
11 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
12 「Google Chrome」のリリースノート(更新履歴)は公開されている 28
13 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 28
14 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 27
15 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 27
16 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 27
17 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 26
18 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない 26
19 Google Chrome™ デベロッパーツールで表示できないスマホ画面を確認するためには、「mobile browser emulator」を使用 26
20 「異なるキーフレームアニメーション名」に、「transformの異なる値」を記述できない 26
2023/2/05 1:06 更新
週間人気ページランキング / 1-29 → 2-4
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 49
2 「マウスオーバー」「ロールオーバー」「ホバー」の違い | CSS 38
3 「bgcolor」「background-color」「background」の違い | CSS 34
4 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 25
5 RGBの種類 / ビットカラー | RGB(色) 20
6 「属性」「プロパティ」「アトリビュート」の違い | CSS 18
6 Design 0 18
7 「東京都」のカラーコード取得は難しい | カラーコード(色) 17
8 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 16
9 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 15
9 Chrome でキャッシュを効かさない | Google Chrome(ブラウザ) 15
10 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 14
11 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 13
11 「Bootstrapデザイン」✕「グラフ」 | 2系(Bootstrap) 13
11 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 13
11 ICCプロファイル | カラーマネージメント(色) 13
11 HSLとHSVの違い | 色変換(色) 13
11 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 13
12 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 12
13 GIMPで「レイヤーとして開く」を選択した画像、の位置情報(x,y)を表示させる方法が分からない | GIMP 系(ソフトウェア) 11
2023/2/5 1:01 更新