いい感じの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は限定的なページを表す名前に。
当たり前のように言われてますが、きっちり守っているウェブサイトが物凄く少ないという驚き。

PCレイアウトでは改行させてSPでは改行をさせたくない時

レスポンシブのコーディングでありがちな事

レスポンシブ前提のコーディングなんかをしていると、PCレイアウトでは改行させてSPでは改行をさせたくない時なんかがあります。つまり以下のようにデザインをしたい時。

SPでは1行なのでbrとか入れたくないのですが、PCでは改行しないといけない板挟みプレイ。そんな時は以下のようにCSSでインラインとブロック要素を作る。

HTM

<p>ご希望の会場<span class="block">を選択して下さい</span><span class="inline green">必須</span></p>

CSS

.block{
  display: block;
}

.inline{
  display:inline;
  padding:3px 8px;
  border-radius: 5px;
  -webkit-border-radius: 5px; 
  -moz-border-radius: 5px;
}

.green{
  background-color:#b3d465;
}

こんな感じにするといい感じにいける。改行するだけなら最後のinlineもblockでいいのですが、このままだと「必須」の角丸グリーンの四角装飾が横に長くなってしまうため、inlineにするのがポイント。