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

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

目次一覧

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

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

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

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

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

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


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

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

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

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

ハイフン採用


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

理由


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


続きはこちら


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

OOCSS



類似度ページランキング
順位 ページタイトル抜粋
1 Googleがハイフンって言ってるからハイフンって、そんな安直な考えで本当に良いの? CSS 「id」「class」名 に関する調査履歴 2 71
2 CSS 「id」「class」名 に関する調査履歴 1 41
3 デフォルトの「Google Chrome」ではURL欄にwwwが表示されないため、「Microsoft Edge」を使用する 35
4 「Google Chrome」タブをグループへ追加すると、そのタイミングでグループは自動的に開かれてしまいます。開かないようにすることはできません 32
5 Illustrator CS2 でファイル名に「更新済み」を追加しない 32
6 「Google Chrome を起動後、100%の確率で3分以内に落ちる」場合は、アンインストール後インストールし直すしかない 32
7 ページで使用されている「id名」「class名」をChromeで取得したい   31
8 「position:absolute;」が分からなくなったときに見るエントリー 29
9 「Twitter Bootstrap」2系のアイコンは、画像なので大きく出来ない 29
10 「Google Chrome」履歴一覧から、複数履歴を選択して一度に開くことはできません。バージョン: 94.0.4606.81(Official Build) (64 ビット) 29
11 Chrome プロファイルが壊れている、と毎回表示されるが、英語なのでどうしたら良いか分からない 29
12 Illustrator で文字を見た目通りSVG出力するためには、「アウトライン作成」処理が必要 29
13 「Google Chrome」のリリースノート(更新履歴)は公開されている 28
14 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 28
15 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 28
16 「Twitter Bootstrap」のアイコンは、画像なので色を変更できない 28
17 CSS の class名 と id名 を、全プロジェクトで意識的に統一しようかと 27
18 divタグがdisplay:block;とかしても、ブロック要素にならないときは、 27
19 StableDiffusionのweb版「DreamStudio」を使用してみた感想。それなりに楽しめましたが、課金してまで使用してみたいとは思いませんでした。 27
20 要素。width と height 属性を指定しなかった場合、(内容のいかんに関わらず)幅 300 ピクセル、高さ 150 ピクセルで表示される 26
2024/10/06 16:59 更新
週間人気ページランキング / 9-29 → 10-5
順位 ページタイトル抜粋 アクセス数
1 RGB ⇔ Lab | 色変換(色) 19
2 鉄道会社毎のカラーコード | カラーコード(色) 16
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 14
4 「:hover」「z-index」を組み合わせて使用すると、正常動作しないことがある | z-index(CSS) 7
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 7
4 RGBの種類 / ビットカラー | RGB(色) 7
5 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 6
5 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 6
5 FontAwesomeでアイコンが□(四角)になって表示されない Forbidden  | Font Awesome(フォント) 6
6 max-width: 100%の効果を打ち消すには、max-width: none; | CSS 5
6 「Chrome拡張機能」開発中に遭遇したエラー | Chrome 拡張機能 5
6 「bgcolor」「background-color」「background」の違い | CSS 5
7 黒体 / 色温度 / D65(6500K)/ D50(5000K)/ K | 色 4
7 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
8 aタグで複数のブロック要素を囲むやり方 | CSS 3
8 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
9 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 2
9 Design 0 2
9 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
9 16進数カラーコード / 2進数 2
2024/10/6 1:01 更新