【付録・CSS設計6】設計手法：OOCSSの紹介【WPテーマ作成】

本付録は、メインシリーズであるWordPressのテーマ作成に役立ちそうな情報を補足していくパートだ。

前回はモジュールとその粒度について解説し、これでようやく準備が整った。

繰り返しになるが、これらは今理解している必要はなく、あくまでそういったものが基本にあるという認識をしておいてもらえれば大丈夫。

今回以降の内容で少しずつ理解していこう。

以下がその記事だ。

さて、今回からようやく本題に入り、具体的な設計手法を幾つか紹介していく。

まずは、OOCSSというものを紹介しよう。

これはかなり古いもので、発表されたのは2011年。

もう10年近く経っており、これだけでCSS設計を進めるのは正直現実的ではない。

しかし、他の設計手法はこのOOCSSを改良したもの、と捉えることができる。

つまり、前回までの考え方と同様、各種設計手法の基礎と考えて差し支えないだろう。

そのため、知識としては持っておくことをオススメする。

なお、本付録は以下の本を参考にしている。

https://amzn.to/3vhFAqe

気になる方は、実際に本屋で中身を見てみたり、買ってみたりしよう。

OOCSS
1. ストラクチャーとスキンの分離
2. コンテナとコンテンツの分離
おわりに

OOCSS

では早速本題へ。

OOCSSはObject Oriented CSS(オブジェクト指向CSS)の略だ。

公式サイトは以下。

Home One

Play fun, interactive CSS games and challenges to boost your web design skills directly in your browser. Learn by doing!

このOOCSSは、モジュールをレゴのように捉えている。

レゴブロックは、細かいパーツが独立しており、それを組み合わせることで様々な形を作ることができるだろう。

この部品をモジュール、完成した形をページと捉えてみよう、というお話だ。

これを達成するために、二つの方針で対象を分離する考え方がある。

ストラクチャ―とスキン
コンテナとコンテンツ

それぞれ、詳細を見ていこう。

ストラクチャーとスキンの分離

これは、8つの考え方のうち、拡張しやすいに該当する。

その時に解説したシングルクラス設計とマルチクラス設計の考え方に近いものだ。

記事リンクを貼っておこう。

この中で、サンプルとして二つのボタンを作っていた。

ちょっと説明用に組み替えたものを作ってみる。

サンプルページはこちらだが、見た目は第4回とあまり変わらない。

出発点は、特に何も考えずに作成した状態だとしよう。

このソースを以下に貼ってみる。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>第6回CSS設計サンプルページ</title>
        
        <!-- css-wipeのファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="./css/css-wipe.css">

        <!-- 自作CSSファイル読み込み -->
        <link rel="stylesheet" type="text/css" href="./css/style.css">
    </head>
    <body>
        <main id="main">
            <button class="btn-general" href="#">ベースモジュール</button>
            <button class="btn-warning" href="#">変更モジュール</button>
        </main>
    </body>
</html>

@charset "UTF-8";

#main .btn-general {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 20px 10px;
    background-color: #e25c00;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #ffffff;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

#main .btn-warning {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 20px 10px;
    background-color: #f1de00;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    color: #222222;
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

こんな状態だ。

さて、第4回の最初とほぼ同じソースになっていて、結論を言ってしまうと同じようにマルチクラス設計でやったような結果になるのだが、今度は考え方が少し異なる。

この設定の中には、大きく以下2種類の設定を行っていることが分かるかと思う。

そのボタン要素の構造(横幅、高さなど)
そのボタン要素自体への設定(背景色、文字色、文字サイズなど)

この一つ目がストラクチャー、二つ目がスキンというものだ。

つまり、これらを分けて定義する、というのがOOCSSの考え方一つ目だ。

具体的にそれぞれどんなプロパティで考えることが多いかというと…

ストラクチャー
- width / height
- margin / padding
スキン
- color
- font
- background

などなど。

ただ、この分類は設計手法側で決められているものではなく、ここについてはその時に都合のいい形で選べばいい。

のだが、やはり先にどう分けるかははっきりさせておこう。

例えば、参考書では上のサンプルを以下の方針で分けている。

共通しているものをストラクチャー
個別の設定をスキン

私も読んだ時それいいのかと思ったのだが、まあ確かに分け方がはっきりしている。

これに従ってサンプルを書き直すと、マルチクラス設計の時に出したサンプルとほぼ一致することになる。

<!-- 省略 -->
<main id="main">
    <!-- クラス名変更 -->
    <button class="btn general" href="#">ベースモジュール</button>
    <button class="btn warning" href="#">変更モジュール</button>
</main>
<!-- 省略 -->

@charset "UTF-8";

/* ストラクチャー */
#main .btn {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 20px 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

/* スキン */
#main .general {
    background-color: #e25c00;
    color: #ffffff;
}

#main .warning {
    background-color: #f1de00;
    color: #222222;
}

やはりマルチクラス設計でストラクチャー部分、スキン部分それぞれのクラス名を作り、それぞれに該当の設定のみを割り当てるようにした。

これが一つ目のストラクチャー、スキンの分離だ。

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

今度は、考え方の4つ目、特定のコンテンツにみだりに依存していないを参考にしたものだ。

コンテナとコンテンツという言葉が出てきているが、実際にはコンテナはどこに配置されるか、コンテンツはそのモジュール自身を指している。

そう考えれば、考え方のところで出した内容とほぼ一緒になる。

先ほど直したサンプルでは、セレクターに#mainがそれぞれに入っており、コンテナとコンテンツが関連してしまっている。

このままだとボタンが#main以外では使えないので、セレクターからそれぞれ#mainを消せばいい。

HTMLは変化しないので、CSS側だけ変更結果を載せよう。

@charset "UTF-8";

/* ストラクチャー */
.btn {
    display: inline-block;
    width: 300px;
    max-width: 100%;
    padding: 20px 10px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16);
    font-size: 18px;
    line-height: 1.5;
    text-align: center;
}

/* スキン */
.general {
    background-color: #e25c00;
    color: #ffffff;
}

.warning {
    background-color: #f1de00;
    color: #222222;
}

これでどこでも使えるようになり、コンテナに依存することなくコンテンツを使えるように、つまり分離することができた、というわけだ。