[CSS]現場で顕著になるCSSの実力の「差」のポイント。

『CSSを書けますよー』では当然アドバンテージにまったくならないのが2011年(まぁ2010年からですが)のWeb制作業界。

ただ、もはや"誰でも知ってる"技術となった「CSS」でも、実務レベルでは差が出たりします。

ここではその実力差として表面に現れてしまうCSSのポイントを列挙します。

メンテナンス性を考慮に入れ、「汎用的」にCSSを書いているかどうか

今回はサイト公開後、もしくはプログラムが絡む動的サイトの場合に重要となる「汎用性」にフォーカスをあてます。

肝は「コーディングしただけではなくて、その"先"まで考えているか?」ですね。

不要なclass属性を振りすぎていないか

CSSを勉強したての人に多いのが『とにかく、該当の要素すべてに"class"を振る』こと。

もちろん、それでもブラウザ上の見た目はOKかもしれませんが、HTMLのファイル容量は大きくなりますし、メンテナンスもあとあと面倒になります。

したがって、無駄なclass属性をつけるのは止めましょう。

たとえば下記のようなケースですね。

<style type="text/css">
p.text {
 font-size: 100%;
}
</style>

<div>
 <p class="text">テキスト</p>
 <p class="text">テキスト</p>
 <p class="text">テキスト</p>
</div>

この場合、p要素すべてにtextというclass名をあてるのではなくて、下記のように書いてあげればp要素へのclassは不要ですよね。

<style type="text/css">
div p {
 font-size: 100%;
}
</style>

<div>
 <p>テキスト</p>
 <p>テキスト</p>
 <p>テキスト</p>
</div>

こういう部分に初心者の方は気を使うといいかと。

HTML要素の"追加"や"削除"に対応できるか

静的なサイトであれば考慮せずともいいかもしれませんが、サイト運用レベルで考えた際に『ある要素がいくつ入るか状況によって変わる』場合、要素の"追加"と"削除"を考慮にいれながらCSSを書いていかないといけません。

例えば、3つの要素がある場合に、真ん中の要素に上下の余白を設けるだけでは、その要素が削除された際に十分な余白を確保できないことになります。

下記のようなコーディングをした場合です。

<style type="text/css">
li.list2 {
 margin: 10px 0;
}
</style>

<ul>
 <li>リスト</li>
 <li class="list2">リスト</li>
 <li>リスト</li>
</ul>

ここでは、2つ目の要素に上下余白を与えるのではなくて、各要素の(たとえば)下部分に余白を与えるほうが汎用性が高いですよね。

<style type="text/css">
li {
 margin-bottom: 10px;
}
</style>

<ul>
 <li>リスト</li>
 <li>リスト</li>
 <li>リスト</li>
</ul>

デザインカンプを見て、いきなりコーディングに入るのではなくて、こういうことを一度まとめてからコーディングに入るようにするといいですよ。

関連するWeb制作・開発Tips

関連リンク