[CSS] モジュール化についてしっくりと理解できないので、ちゃんと考えてみました

こんにちは、@yoheiMuneです。
「CSSのモジュール化」という言葉を聞いたことありますでしょうか？CSSにプログラミングなどにあるモジュール化という概念を当てはめて、 より効率的に、より実装しやすいCSSにしようという考え方です。
この「CSSのモジュール化」について、「それってどーゆう意味？」ということを考えたいと思い、ブログを書きました。

モジュール化とはなに？

「CSSのモジュール化」という単語を理解するためには、モジュールとは何かを把握する必要があるようです。
グーグル先生に聞くと色々とモジュールの定義が出てきます。以下にはwikipediaから引用した文言を記載します。

モジュール (Module)とは、工学などにおける設計上の概念で、システムを構成する要素となるもの。いくつかの部品的機能を集め、まとまりのある機能を持った部品のこと。 引用元：Wikipediaより

また、同ページでソフトウエアにもけるモジュールについて説明してある部分がありました。

プログラミングにおいて、一連の機能をひとまとまりになる複数の機能：モジュールに分割し、それぞれ別に開発する場合がある。こうすることで、全体として完成を早めることが出来る上、モジュール単位でテストしたりすることが可能になり、モジュールの入れ替えで機能を高めたり補修したりすることができるようになる。

プログラムのモジュールは、出来るだけ他のモジュールとの結合度を弱めて、独立性を高めることが望ましい。
引用元：Wikipediaより

上記の転載部分のポイントとしては以下の内容になるでしょうか。

• モジュールは、まとまりのある機能を持った部品
• モジュールは、出来るだけ他との依存度を低くして独立していることが望ましい
• 独立したモジュールであれば、モジュール単体でテストがしやすい
• 独立したモジュールであれば、その部品を再利用しやすい

Wikipediaの同ページには他にも、「インターフェースと実装の分離」について言及する箇所がありましたが、CSSでは関係ないと思うので割愛させて頂きました。

CSSにおけるモジュール化とは

「まとまりのある機能を持った部品」であるCSSって何なのでしょうか。
CSSはHTMLを装飾するためのものであり、CSS単体ではあまり意味をなさない要素。 なので「まとまりのある機能を持った部品」として考える上で、「HTML + CSS」をひとまとめにして、モジュールを考えると良いと思います。

「HTML + CSS」で考えた場合の部品というと、以下のようなものが挙げられると思います。

• ボタン
• ナビゲーション
• ヘッダー、フッター
• ダイアログボックス
• 2カラム、3カラムレイアウト
• など

ここではボタンを例に挙げて、「HTML + CSS」でのモジュール化を考えたいと思います。

ボタンを例にモジュール化を行う

デザインが考えられたサイトであれば、サイト内で使うボタンはある程度以下のような統一感があるのではないでしょうか。

• ボタンの高さや幅は、数パターンで、大きさに統一感がある
• 色やグラデーションも、数パターンで、統一感がある
• 角丸の丸みなども統一感がある

ある程度バリエーションはあるものの、統一感のあるパターンでボタンを制作することが出来ます。
サイト内で作るボタンのバリエーションを、CSSで一気に作ることで「ボタン」という単位でモジュールを作ることが出来ます。

まずは、基本となるボタンのクラスを作成します。

<style>
.btn {
    display: block;
    width: 150px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    color: white;
    border-radius: 10px;
    background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
    /*グラデーションの記載は長いので、１つだけ記載しています*/
}
</style>
<div class="btn">ボタン</div>

基本形を作ったら、カスケード（＝上書き）する形で、ボタンの大きさのバリエーションを定義します。

<style>
    .btn.sizeS {
        width: 50px;
    }
    .btn.sizeL {
        width: 200px;
    }
</style>
<div class="btn sizeS">sizeS</div>
<div class="btn">標準のボタン</div>
<div class="btn sizeL">sizeL</div>

同じように、色のバリエーションも定義してしまいましょう。

<style>
.btn.red {
    background: linear-gradient(to bottom,  #cc0000 0%,#cc0000 100%);
}
.btn.gray {
    background: linear-gradient(to bottom,  #b5bdc8 0%,#828c95 36%,#28343b 100%);
}
</style>
<div class="btn red">.red</div>
<div class="btn">通常ボタン</div>
<div class="btn gray">.black</div>

という感じで、サイトで使うボタンのバリエーションを作りつつ、ボタンたち（＝モジュール）を作りました。
このボタンたちは「ユーザーからのアクションを受け取る」機能を受け持つモジュールと言って良いのかなぁと（ちょっと自信ない））。

「HTML + CSS」でモジュールを作る際の注意点

モジュールを作る上での注意点が有ります。それは、

モジュールは他の内容から独立していること

です。独立性を高くするにはどうしたら良いのでしょうか。独立性を高めるポイントを書きたいと思います。

注意点１：親セレクタに依存しない

この点は大変重要です。今回定義した「.btn」というクラスですが、以下のような定義であったとすると、大変使いづらくなります。

.frame.btn {
    /*ボタンのスタイル*/
}

これは、「.btnクラスを使いたいなら、.frameクラスを親にしなければならない」ということです。
これは、ボタンというモジュールが、モジュール外の要素（.frame）に依存しているという状態になります。 これは「ボタンモジュールを使う場合の制約がある」ということで、使いづらいモジュールとなってしまいます。

注意点２：idセレクタを利用しない

これも大切なことです。idセレクタが指定されたスタイルでは、以下のようなことで困ります。

• あるページから違うページへモジュールを移動した際に、idがあるか気にする必要がある
• ひとつのページの複数箇所で同一モジュールを使いたい場合に、idが重複して使えない

idは、HTML要素毎に固有のものとなりますので、idに依存したモジュールは、使いづらいモジュールとなります。

他のスタイルへの依存度を下げる

出来れば、１つのモジュール内で、スタイルが完結することが望ましいと思います。
たとえば、以下のようにボタンモジュールが、他のモジュールに依存している場合、依存しているモジュールの変更がボタンモジュールにも影響してしまいます。

.radiusBox {
    border-radius: 10px;
}
.btn {
    display: block;
    width: 100px;
    height: 50px;
    /*他にもスタイルを定義*/
}
<div class="btn radiusBox">依存したボタン</div>

この場合、ボタンモジュールが、他のスタイルにも依存していて、独立性が低くなってしまっています。
できれば、.btnクラスに角丸の指定も入れてしまって、依存度を下げる（＝独立性を高める）ことを考えるべきです。

ただし例外もあると思います。
たとえば、サイト全体で使うフォントサイズ、フォントファミリーなどは、bodyタグなどに指定して、それに依存しても良いと思います。

「他のスタイルへの依存度を下げる」ことは、やり過ぎずやらなさ過ぎず、程よい感じで行うと良いと思います。

最後に

今回は、CSSのモジュール化について考えてみたブログでした。
まだ少しCSSのモジュールについてぼんやりした感じを持っているのですが、「独立性を高くする」という点、しっかりと考えてマークアップをして行かなきゃなぁと思いました。
モジュールを定義しつつ、それを一覧できるページを作って、サイト制作はそこから基本的にコピペで出来る環境を作るべく、今後も邁進して行ければと思います。

最後までご覧頂きましてありがとうございました。