CSSのコンポーネント化

2007年4月12日

(X)HTML+CSSでコーディングを行っていると同じようなCSSを繰り返し書き込んでいることに気づくと思います。

普段よく使うグローバルナビゲーションや商品一覧や商品詳細などをコーディングしていると(X)HTMLはもちろんCSSも数値は違えど大体同じ記述を繰り返ししていますよね。

そういった普段よく使うCSSはコンポーネント化するほうが圧倒的に作業効率は高まります。

しかし、CSSをコンポーネント化する目的としては、このレイアウトにはこのCSSとかあのレイアウトにはこのCSSといったようなデザインの変化を考慮した目的でのコンポーネント作成になってしまいます。

しかし、CSSの正しい概念として、id、class付けはレイアウト(デザイン)を想定して設定するのではなく役割を想定して決めるほうが良いとされているのでコンポーネント化はダメなんじゃないの？と思ってしまいます。

しかし、僕個人の意見としてはルールというのは必ずしも守らなければいけない物だとは思いません。絶対ルールを守りたい人は守っていればいいとは思いますが。誰にも迷惑がかからないルールであれば必要であれば破ってしまえというのが僕の考えです。

実生活において僕達は社会が決めたルールに完全に乗っ取って生活してるでしょうか？交通規則やゴミの分別などといったルールにはかならずルール外での暗黙のグレーゾーンというのが存在するもんですよね。

僕も見通しの良い道路など、速度制限をプラス10キロで走っていますし、仕事帰りでしんどい日などゴミの分別もあいまいにしてしまうときがあります。(これはモラルの問題かもしれませんが)

ですので作業効率が格段にUPするCSSのコンポーネント化も僕は必要であればどんどん作っていってもいいんじゃないかと考えています。

しかし、明らかに文法に反するエラーがでるような(X)HTMLや、複数での作業が困難になるようなCSSは避けたいところですが、各組織に見合ったCSSコンポーネント化は協力し合えばそんな難しい作業ではないと思います。

たとえばグローバルナビゲーションであれば

<ul id="global_nav" class="gn_con">
<li><a href="#">nav1</a></li>
<li><a href="#">nav2</a></li>
<li><a href="#">nav3</a></li>
</ul>

上記のような(X)HTMLにclassで下記CSSのコンポーネントを適用する。コンポーネント化したCSSはコンポーネントだけで一枚のCSSにまとめて読み込んでおくとします。

ul.gn_con {
display:inline;
}
ul.gn_con li {
float:left;
}
ul.gn_con li a {
display:block;
}

そして、コンポーネントで決めたCSS以外のデザインに関するCSS(width、heightやbackground等)はidなどでその都度指定するとします。

上記はあくまで一例であって、このようなコンポーネント化が効果的、もしくは効率的なのかどうかは案件の規模や組織のビジネスモデルによって異なってくるかとは思いますが、効率を考える場合CSSのコンポーネント化という考えは必要になってくるような気がします。

Menu