フロントエンドエンジニア

オブジェクト指向も理解してCSSを破綻させない設計手法OOCSSを紹介!

こんにちは、SHIBAKEN – @dec_shibaken – です

今回はCSS設計手法の一つである、OOCSSをご紹介させて頂きたいと思います。

様々なCSS設計手法がある中で、今回の手法は比較的優しくて導入しやすいものなので、是非覚えていただきたいです。

  • Sassの知識が必要になります。あらかじめご了承ください!

そもそもOOCSSって?

重複してしまいますが、OOCSSは、CSS設計手法の中では比較的優しく導入しやすい構成案の一つで、ボタン、リスト、タイトルと言うようなオブジェクトを中心としたコーディング手法です。

ちなみに、オブジェクト指向というのは簡単にいうと「再利用できるように」且つ「無駄がないように」つくられた設計書みたいなものです。

ストラクチャーとスキンを分ける

OOCSSでは、まずオブジェクトを「ストラクチャー」と「スキン」の2つに分けて考える必要があります。
ストラクチャーというのは、構造を形作る部分のこと。例えるなら、ボタンです。
スキンというのは、そのオブジェクトの見た目を形作る部分のことです。例えるなら、ボタンのカラーですね。

//ストラクチャー(ボタン)
.box {
   width:100%;
  .btn {
    display: block;
    width: 300px;
    height: 50px;
    background-color: #f3f4f6;
    border-radius: 10px;

    //スキン
    &-registration {
      background-color: #e91d63;
    }

    //スキン
    &-submit {
      background-color: #01afd1;
    }
  }
}

こんな感じでしょうか?ボタンで例えていますが、もっと抽象的に表現をするのなら、人形の型と着せ替える服、これもストラクチャーとスキンですよね。
こう言ったオブジェクトを量産しながら作っていくのがOOCSSです。

ちなみに、スキンのクラス名は、ストラクチャーのクラス名を引き継がせます。
OOCSSの命名規則の規約の一つです。

[ストラクチャー] – [スキン]
.btn-registration
.btn-submit

もう一つは、クラスをマルチクラス(複数クラス)にして設定することができるのが、OOCSSの特徴です。

下記の通りです。

<div class="box">
  <a class="btn"></a>
  <a class="btn btn-registration"></a>
  <a class="btn btn-submit"></a>
</div>

コンテナーとコンテントを分ける

ちなみに、オブジェクトはコンテナーとコンテントに分けることも出来ます。

先ほどのソースコードを例に説明すると
コンテントは、.btnです。
コンテナーは、コンテントを囲う.boxになります。

オブジェクトにして使う場合は大抵汎用性がなけれいけません。特にボタンはいろんなシーンで使われることもあると思うので、特定のコンテナーに依存するような作りだと、都度都度ボタンを作り直さなければいけないという手間が発生いたします。絶対に避けないといけないポイントです。

現在の記述だと、.boxというコンテナーなのでスタイルが適用されていますが、
例えば、.listだったらどうでしょう?スタイルが適用されず破綻してしまいます。

どんなシーンでもボタンが使えるようにするには、コンテナーと、コンテントを分けて記述すれば良いと思います。

//コンテナー
.box {
  width:100%;
}

//ここで分ける

//コンテント
.btn {
  display: block;
  width: 300px;
  height: 50px;
  background-color: #f3f4f6;
  border-radius: 10px;

  //スキン
  &-registration {
    background-color: #e91d63;
  }

  //スキン
  &-submit {
    background-color: #01afd1;
  }
}

命名規則を考える時は必ずcss4つの定義

cssの設計手法を考える時に必要な4つの定義があるので、まずはそちらを紹介いたします。以下の通りです。

・予測しやすい(可読性)
・再利用しやすい(再利用性)
・保守しやすい(メンテナンス性)
・拡張しやすい(拡張性)

CSSの設計を破綻させない「良いCSS」にする為の4つ定義こんにちは、SHIBAKEN - @dec_shibaken - です これからマークアップを初めて行く人に、是非考えて読んでいた...

こんな感じです。

いかがでしたでしょうか?

個人的には唯一デメリットとして感じているのは、classの量が多くなってしまうところです。

命名規則をわかりやすく、整理しながら使うことで煩雑化を抑える努力は必要かもしれません。

最後になりますが、ご参考の上、CSS設計思想をサイト設計に取り入れてみてはいかがでしょうか?

ありがとうございました!

フリーランス / ブロガー
SHIBAKEN
埼玉生まれ東京育ちの独身30代男。 都内の出版社でWebデザイナーとして就職。その後転職し、制作会社でフロントエンドエンジニアとして6年間従事。 現在は会社を退職し、フラリフラリと風に吹かれながらフリーランスとして現在に至る。

プロフィールの詳細はこちら
\ Follow me /