20494
下記はBootstrapの Modal のサンプルコードの一部なのですが

<http://getbootstrap.com/javascript/>

```

    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
      Launch demo modal
    </button>
    
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
      <div class="modal-dialog" role="document">
    
```

`id`や一部の属性のみキャメルケースで記述されその他はスネイクケースになってるのには何か理由があるんでしょうか？

例えば `data-*`属性はハイフンが使えないとかでしょうか？  
だとしたら`aria-labelledby`もキャメルケースの理由がわかりませんし…。
CC BY-SA 3.0
2015-12-31T00:04:46.943
20491
2015-12-31T01:52:10.143
3271
question
javascript html
BootstrapのサンプルのコードにCamelCaseとsnake_caseが混在する理由
HTML4の頃は `id` 属性に設定できる値は ID型 として区別されていて、class
をはじめとする他の属性よりも使える文字種が少ないことはありました。が、その頃でもハイフンは許容されていましたし、HTML5ではもっと緩くなっています。CSSのセレクタでは当然扱えます。

[HTML4.01 と HTML5 における id 属性に関するまとめ -
Neareal](http://neareal.net/index.php?IT%2FWeb%2FHTML%2FIdAttributeTipsInHTML4.01andHTML5.0)

よって、規格上の必然性はありません。

変数名にハイフンを使えない Javascript に合わせて、という理由が多い気はしますが、結局は好みの問題です。「id class
camelcase」あたりでググると、この件についての意見がごろごろ出てきます。

Bootstrap に限った話でいえば、Bootstrap
上意味のある文字列ではなくプレースホルダだと示すため、あるいは単に目立たせるため、という理由が挙げられていました。

[camelCase for ids and hyphens for class names · Issue #17417 ·
twbs/bootstrap](https://github.com/twbs/bootstrap/issues/17417)

`data-target` や `aria-labelledby` が camelCase なのは、別要素の `id`
をそのまま書いているから、というだけでしょう。当該要素の `id`
も併せて変更すれば、[問題なく動作します](https://jsfiddle.net/f2fgwxpx/)。
CC BY-SA 3.0
2015-12-31T01:52:10.143
20494
2015-12-31T01:52:10.143
8000
20491
answer