STAFF BLOG STAFF BLOG

STAFF BLOG

2020.05.24 htmlコーディング

メンテナンス性と再利用性がアップするOOCSS(オブジェクト指向CSS)とは?

メンテナンス性と再利用性がアップするOOCSS(オブジェクト指向CSS)とは?
CSSのコーディングをしていると、コードのメンテナンス性について気になることはないでしょうか? 明確なコーディングルールを設けていないために、それぞれのコーダーが違う考え方でスタイリングしてしまい、結果的に余計な記述が増えてしまった。コードを書いた本人でなければわからないルールが存在し、メンテナンス性が落ちてしまったということはよくあること。 メンテナンス性に優れたCSSコーディングには、CSS設計の考え方が欠かせません。また、CSS設計では、「予測しやすい」「再利用しやすい」「メンテナンスしやすい」「拡張しやすい」という4つのポイントを意識することが重要です。 今回は、メンテナンス性と再利用性をアップさせる、オブジェクト指向のCSS設計手法「OOCSS」について見てみましょう。

そもそもオブジェクト指向ってなに?

プログラミングの知識を持っている人なら、「オブジェクト指向」はよく耳にする言葉かもしれません。プログラミングの世界におけるオブジェクト指向は、「プログラムを手順ではなくモノの作成・操作として見る考え方」として捉えられています。 この考え方をCSSに当てはめてみると、「再利用できるように・無駄がないようにクラスを設計しよう」ということになります。そして、その考え方を適用したクラス設計が「OOCSS(Object-Oriented CSS)」。シンプルに言うと、「構造と見た目を切り離しましょう」という考え方になります。

OOCSSの考え方とは?

OOCSSでは、「構造とスキン」「コンテナとコンテンツ」を分離してクラス定義します。従来のCSSのようにIDをきっかけに子孫セレクタによってスタイルを定義するのではなく、すべてのスタイルをクラスで定義し、それらを組み合わせていきます。

構造とスキンの分離

OOCSSでは、「構造とスキンを分離してクラス定義し、それらを組み合わせてスタイルを定義」していきます。 width、height、border、padding、marginなどの構造と、color、border-color、background-colorなどのスキンを分離すれば、少ないコードでよりたくさんの見た目を定義することができます。 たとえば、Webサイトでよく利用されるボタンのスタイルを定義する場合、
.btn { width: 250px; height: 50px; text-align: center; } .btn-blue { background-color: red; color: white; }
のように、.btnという「構造」と、.btn-blueという「見た目」を切り離して記述します。独立して構造が指定されているため、他の色のボタンが追加されても、次の記述のように見た目のスタイルを定義するだけで済むというメリットがあります。
<a class="btn btn-blue">青ボタン</a>
<a class="btn btn-gray>グレーボタン</a>
共通的な構造部分は共通化してあるため無駄がなく、HTMLを見るだけで何色のボタンなのかがひと目で分かります。

コンテナとコンテンツの分離

OOCSSには「場所に依存しない(HTMLとCSSの依存度が低い)スタイルの設定」という考え方もあります。 CSSに対応するHTMLがどのタグだったとしても、同じ見た目を提供できる。どこでも使用できる汎用的なパーツをブロックのように積み上げていくという考え方がOOCSSの特徴です。 従来のCSSコーディングでは、次のように要素にスタイルを指定していましたが、
h2 { font-size:120%; }
OOCSSではクラス名を付与してスタイルを指定します。
.subtitle { font-size:120%; }
そうすることで、要素が変わってもCSSを変える必要がないため、より汎用的な記述になります。 また、従来は場所を限定して次のようにスタイルを指定していましたが、
.header .logo { background-image: url(/images/logo.png); width: 300px; height: 30px; } .footer .logo { background-image:url(/images/logo-small.png); width: 200px; height: 15px; }
OOCSSでは、クラス名を付与してスタイルを指定します。
.logo-large {

background-image: url(/images/logo.png);

width: 300px;

height: 30px;

}


.logo-small {

background-image:url(/images/logo-small.png);

width: 200px;

height:15px;

}

そうすることで、場所を限定することなく、サイドバーやメインエリアでも使える汎用的な記述になります。

OOCSSのCSS設計でパフォーマンスをアップさせる

OOCSSのCSS設計では、クラスを組み合わせることでスタイルの使い回しができます。その結果、HTMLを見ただけで構造とスタイルの両方が把握できるというメリットにつながります。 Webサイトはリリースした時点で終了ではありません。サイトの規模が大きくなることもありますし、同じようなサイトを新規で立ち上げることもあります。汎用性に欠けたCSSでコーディングしていると、制作コストやメンテナンスコストはどんどん膨らんでしまいます。 CSSがシンプルになりメンテナンス性とパフォーマンスがアップするOOCSSのCSS設計。この機会に知識を深めてみてはいかがでしょうか。

関連記事