コンポーネントをどのように作るか

最適化を焦らない

えらい人の言葉で

「時期尚早な最適化はすべての悪の根源である」

とあるように、はじめから完璧に最適化を意識しすぎてしまうと時間をかけて作ったものが結局使わず無駄になってしまったということがありうる。
必要になるまで機能を追加しない。

Rules of three

どういったタイミングで最適化すればよいかのガイドライン

「3回繰り返したものは、パターンとして成立する」

1. 初めてそのパターンが登場したときには、再利用すること特に考えなくてよい
2. 一度解決したパターンに再び遭遇したときにも、コンポーネント化したくなる気持ちを抑える
3. 3度目になって、パターンとして何が分かっていて、何が分かっていないかを考えてコンポーネント化してリファクタリングをする

こうなる前に心がけること

• 詳細度の高いセレクタを書かない
• クラス名の衝突・スタイルの汚染が無いようにユニークな名前をつける

Rules of three を別の視点で考えるならば

「そのコンポーネントが、3つのプロジェクトで使えたならば、他のプロジェクトでも使える可能性がある」

SOLID CSS

• Single Responsibility Principle / 単一責任の原則
• Open/Closed Principle / オープン・クローズドの原則
• Liskov Substitution Principle / リスコフの置換原則
• Interface Segregation Principle / 依存関係逆転の原則
• Dependency Inversion Principle / インターフェイス分離の原則

単一責任の原則

構造という責任 と 見た目という責任 は分離して設計する。
具体的にいうと、構造である position や float と見た目である border や background は一緒のルールセットにしない。

解放／閉鎖の原則

Todo：後ほどまとめる

再利用が全てではない

例えば、下記のようなデザインがあるとします。

.btn {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0.6em;
    line-height: 1;
    text-decoration: none;
    color: #ddd;
}

.heading {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

<a href="#" class="btn">ボタン</a>
<h2 class="btn heading">見出し</h2>

例のように、同じ装飾であれば class を1つにまとめた方がよいと安直に考えない。
この場合、SMACSS の Theme カテゴリーのようなアプローチで次のように書き換えることができます！

.btn {
    display: inline-block;
    line-height: 1;
    text-decoration: none;
    color: #ddd;
}

.heading {
    display: block;
    font-size: 18px;
    font-weight: bold;
}

.theme-default {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0.6em;
}

<a href="#" class="btn theme-default">ボタン</a>
<h2 class="heading theme-default">見出し</h2>