目次一覧
状態:試行錯誤履歴
閲覧数:6,197
投稿日: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」名も評価しているの？
CSS「id」「class」名の区切り文字は、URLの区切り文字と同じ考え方をするの？
区切り文字がハイフン (-) だと何が駄目なの？
CSS区切り文字として、ハイフン採用
「Google」VS「Apple」／ Googleは、CSSの「id」「class」名も評価しているの？
「Google」VS「Apple」
面白い検証ページを発見
・アップルのHTMLコーディングについて（Google ルールと比較してみた）
※Appleが「コーディングルール」を公表しているわけではなくて、「Apple のHTML5サイトのソースを見比べてみました」なので注意は必要…
私がGoogle のガイドラインを見ていて「ん？」って感じた部分が、Apple の方のコードにはあまり無い。
まあ、そういうことなのかもしれませんね
そう書いてあるのだが、調査している肝心の「id class 命名時の繋ぎ方」部分については、正直微妙な結果に…まあ、そういうことなのかもしれませんね
Google → ハイフンで繋ぐ
Apple → ハイフン・アンダーバー・キャメルケースの混在
いくら何でも混在はマズいと思うのだが…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の区切り文字と同じ考え方をするの？
Google公式見解
URL に区切り記号を使用します。http://www.example.com/green-dress.html という URL の方が、http://www.example.com/greendress.html という URL よりずっとわかりやすくなります。URL にはアンダースコア (_) ではなくハイフン (-) を使用することをお勧めします
・Google と相性の良い URL の作成URLについては、何となく理解できる
きっと、Googleクローラの仕様というべきものなのだろう
だけど、CSSについてはどうなんだろう？
あくまでも、コーディングルールとしての指針をGoogleが提示した、というだけの話なの？
区切り文字がハイフン (-) だと何が駄目なの？
CSS区切り文字として、ハイフン採用
ハイフン採用
最終的に「ハイフン採用」決定
理由
・「ダブルクリック で一度に選択できない」とか、そんなものは単なる制作サイドの都合に過ぎない
・「Google」が示したコーディングルールが100%正しいとは思わないが、それを覆すだけの材料を持ち合わせていないのも、また事実
・「ハイフン」「アンダーバー」「ローワーキャメルケース」「区切りなし小文字」。どれでも同じなら、「Google」が推奨している「ハイフン」を不採用にする理由は見当たらない
・ましてやその選考過程において、「制作サイドの都合」は考慮されるべきではない
続きはこちら