IDによるスタイル適応が拡張性を下げるケース

cssでIDを使ってスタイルを適応してるコードで、これは拡張しにくい。。。と思ったケース

コード

<ul id="style01" class="cf">
  <li> ....
  <li> ....
</ul>

#style01 {
  width 200px;
}

#style01 li {
  width: 100px;
  float: left;
}

横並びにliをレイアウトするようなHTML

これを下にもう１段増やしたい

<ul id="style01" class="cf">
  <li> ....
  <li> ....
</ul>
<ul id="style01" class="cf">
  <li> ....
  <li> ....
</ul>

もちろんこうはできない。IDが重複するので

<ul class="style01 cf">
  <li> ....
  <li> ....
</ul>
<ul class="style01 cf">
  <li> ....
  <li> ....
</ul>

.style01 {
  width 200px;
}

.style01 li {
  width: 100px;
  float: left;
}

クラスにスタイルを移動

つらい。

これ移動するのに

• #style01を使っている箇所をプロジェクトファイル全体から検索し、変更しても問題ないことを確認
• IDをクラスへ付け替え
• 表示チェックで確認

しました。もともとクラスで設計されてたら

• 同じ構造のタグを下に追加
• 表示チェックで確認

だけで済んだ。

IDを使う前にちょっとだけ将来のことをおいたほうが良いかなと。