いい感じのclass名とID名の付け方
第三者が書いたHTMLやCSSをいじる際に、こんな感じで組み上がっているものをたまに見かけます。
<h2>お問い合わせ</h2> <div id="mainCol"> <div class="contact_left"> メインカラムの~問い合わせページの左側パーツ </div> <div class="contact_right"> メインカラムの~問い合わせページの右側パーツ </div> </div> <div id="menuCol"> メニューカラム </div>
パッと見悪くなさそうですが、この手のルールで10P単位のページ数が書かれているとちょっと困ります。
というのも、クラスはソースコード内で複数使えるため汎用性があるものに利用されます。よって上記のソースコードの意図は2パターンあります。
実はclassではなくidと間違えていてこの問い合わせページでしか使わない
1つ目がこのタイプ。他ページ等では一切使わないにも関わらずclassを使ってしまう。後述するパターンよりはマシと言えます。
他ページでも使うからclassにしている
このパターンが一番困ります。classなので他ページでも使っているにも関わらずclass名が「contact_left」となっているため、紛らわしい。素直に「30_left」(この場合width30%を意味している)とかにして頂くと素直に使える。また、多分common.cssに集約されているんだろうなと想像もつく。
というわけで、クラスの名前付けは汎用性を意識した名前に。IDは限定的なページを表す名前に。
当たり前のように言われてますが、きっちり守っているウェブサイトが物凄く少ないという驚き。