質問: 下記はBootstrapの Modal のサンプルコードの一部なのですが ``` Launch demo modal ``` `id`や一部の属性のみキャメルケースで記述されその他はスネイクケースになってるのには何か理由があるんでしょうか? 例えば `data-*`属性はハイフンが使えないとかでしょうか? だとしたら`aria-labelledby`もキャメルケースの理由がわかりませんし...。
回答: HTML4の頃は `id` 属性に設定できる値は ID型 として区別されていて、class をはじめとする他の属性よりも使える文字種が少ないことはありました。が、その頃でもハイフンは許容されていましたし、HTML5ではもっと緩くなっています。CSSのセレクタでは当然扱えます。 HTML4.01 と HTML5 における id 属性に関するまとめ - Neareal よって、規格上の必然性はありません。 変数名にハイフンを使えない Javascript に合わせて、という理由が多い気はしますが、結局は好みの問題です。「id class camelcase」あたりでググると、この件についての意見がごろごろ出てきます。 Bootstrap に限った話でいえば、Bootstrap 上意味のある文字列ではなくプレースホルダだと示すため、あるいは単に目立たせるため、という理由が挙げられていました。 camelCase for ids and hyphens for class names · Issue #17417 · twbs/bootstrap `data-target` や `aria-labelledby` が camelCase なのは、別要素の `id` をそのまま書いているから、というだけでしょう。当該要素の `id` も併せて変更すれば、問題なく動作します。