cssを指定しやすいhtmlのidの付け方

Question

現在、14ページあるサイトを製作しているのですが、cssの指定が上手くいきません。サイト自体はフレームが出来ているのですが、cssを書いていくうちに、ところどころ別ページとidが被って、指定がちゃんと反映されない状態になってしまっています。
これからもページは追加する予定で、JSPも使う予定なので、出来るだけきれいなhtmlとcssを書きたいのです。
以下のように書いています。同じボックスサイズになるからいいかーと考えていたのですが、cssの書き方が悪いのかcssを書けば書くほどcssを完成させたページまでおかしくなったり上手く指定出来なかったりして悩んでいます。
以下のhtmlは、ボックスが一段二段と縦並びで、ABは左右で横並びです。これを基本にすべて書いています。

<div id="main1"><!---1はページ番号-->
	<div id="block1">
		<div id="A">
			内容
		</div>
		<div id="B">
			内容
		</div>
	</div><!--block1-->
	<div id="block2"><!--block2-->
		<div id="C">
			内容
		</div>
		<div id="D">
			内容
		</div>
	</div><!--/block2-->
</div><!--/main-->

ウェブサイトで、番号を振るのがいいと読んだのですが、私は、cssで、A1,A2,A3...{}と指定していくと文字数が増えて見づらくなると思い、AやBにまで番号は振りませんでした。AやBにもA1,A2など番号を振るべきなのでしょうか？
今はすべてidを振っています。A,B,C,Dはclassにするべきですか？
綺麗で見やすいhtmlとcssにするために皆様はどうされてますか？
製作中のサイトはmixiのコミュニティのようにユーザがページを作れるようにしたいのですが、注意すべき点があれば教えてください。
質問ばかりですが、よろしくお願いします。

Answer 1

idをベースにCSSを指定する、はCSS設計の代表的なアンチパターンに分類されます。
（idはページに一度きりで使い回しが効かない、詳細度がその他のセレクタより高いため上書きの変更が難しいなど様々理由があります）

また、「番号を振る」というのは一昔前は有効に活用されている時期がありましたが
ここ最近では同じくアンチパターンの1つに分類されます。
（保守、メンテナンス性という観点から、「これは何に何のために書かれたCSSなのか？」がCSSを見ただけでは他人、ひいては未来の自分自身が理解するのが困難になるためです）

例えば、サイト上で一番利用頻度が高い汎用ボタンのためのcssを書くことになったと仮定します。
コミュニティサイトで例えれば「〜〜を送信する」などユーザがアクションを確定するために利用するボタンに当たるでしょう
第一歩として、UI1つ1つの単位を「コンポーネント」とか「モジュール」と捉えて、classベースである程度利用が想定されるどのタグに付与しても期待通りの見てくれになるように気をつけるのがベターです。

なぜクラスベースが良いのかというと、

#button-primary（画面で同時に1つしか使えないので根本的によくない）
a.button-primary（<button>や<input type="submit">、<div></div>に使うことが出来ません
.button-primary（上記2つの問題が起きません）

2番めの問題、ある程度利用が想定されるであろうどのタグに付与しても同じ見てくれになるようにというのは綺麗に作るという上では大事です。

これは、BootstrapというTwitter社が制作しているCSSフレームワークのドキュメントやそのCSSを覗いてみることでイメージがつきやすいと思います。

試しに検索をかけてみたら、そういったことが簡単に網羅されている記事がありましたので載せます。

CSS Nite LP39に参加してきました。 | littlepad blog http://www.littlepad.net/blog/2015/02/08/234732
CSSベタープラクティス殴り書き - Qiita http://qiita.com/8845musign/items/422861724d791f93285b

Comments

[yamanoharu0129]

皆様の回答を元に一から見直して、コードがかなりすっきりしました。id属性はやめてclass属性に変更し、htmlのタグも統一できるところは統一することで、管理もしやすくなりました。リンクのサイトを読みもっと勉強します。
とてもわかりやすく、理由も書いてくださっていたので、ベストアンサーにさせていただきました。
皆様ありがとうございました。

Answer 2

こんにちは。

番号を振るのがいい

可読性や再利用性を考えると、セレクタに「番号」を振ることはおすすめしません。
たとえば、block1やsection1という名前は、「どんなスタイルがあたっているのか想像しにくい」からです。
media-blockや、contact-sectionなど、その要素が一体何のコンテンツで、どんな見た目なのかわかりやすいものにすると、後々便利だと思います。

今はすべてidを振っています

セレクタにIDを使用するということは、そのページの中で必ず唯一の要素であることが前提とする場合に使用するようにしましょう。
サイトのデザインの中で繰り返し使用されることが想定されるような「遷移ボタン」などを1つのコンポーネントとして.transition-buttonなど、使いまわせるような形でクラス名での指定をおすすめします。

yamanoharu0129様のソースコードの中での

<div id="A">
    // 内容
</div>
<div id="B">
    // 内容
</div>

AとBという要素は全く違うデザインのものでしょうか？
もし、似たような意味合いを持つ、「繰り返される要素」であるなら、スタイルをまとめて1つのコンポーネントにしてしまいましょう。
Aに対してのCSSの記述とBに対してのCSSの記述が重複して、追加のたびに新しく同じ指定を記述したりどんどんCSSファイルが長くなるようなことを未然に防ぎ、メンテナンス性の向上が見込めます。

CSSは自由度の高いもので、ある程度の規約を設けなければすぐに破綻してしまい、開発が非効率になってしまいがちです。
世の中にはOOCSS(Object Oriented CSS)というオブジェクト指向の考え方を取り入れたCSSの設計手法があり、その中でも様々なフレームワークが提唱されています。
以下のようなページを参考にしてください！
OOCSSの基本
難しいOOCSS（オブジェクト指向CSS）の設計

Answer 3

cssを書いていくうちに、ところどころ別ページとidが被って、指定がちゃんと反映されない状態になってしまっています。

最初、どんなにきれいに書けていても、画面構造の設計 をしないまま行き当たりばったりの追加・修正を繰り返せば、必ず混乱を来します。

もし単純に、ページ間でのidの重複を避けたいだけならば、ページそのものにidを割り当て、CSSのidの先頭に必ずページidを付加してやれば良いです。

しかし、それでは類似の設定を何度も書かねばならず カスケード(＝数珠繋ぎの) スタイルシートを使っているメリットが殆ど失われてしまいます。

CSSを使いこなすカギは、全てを id で管理しようとせずに、類似のデザインを持つ区画を整理・グループ化し class を上手く活用することではないでしょうか？

とはいえ、最初に書いたように、正しい設計なくしては、コードの可読性もメンテナンス性も望めません。ですから、もし本気で改善を望まれるならば、目先の改善を急がず、たとえば下記などを参考に『画面設計』について理解を深めてみてはいかがでしょうか。

[ページの設計](http://www.tokiwa.ac.jp/~shio/el/css/page.htm)
[CSS設計を学んで、拡張性と保守性に強いCSSを書こう](http://cartman0.hatenablog.com/entry/2015/09/12/063932)