Webの小ネタ 〜CSS設計編〜

ひとつのエントリにするほどでもないけど、なんとなく興味深いWebのTipsや情報を紹介するコーナーです。

FLOCSSにおける、Component と Project の違い

FLOCSSにおいて悩むポイントである、この Object は Component なのか？ それとも Project なのか？ 問題があります。 僕も気になったため、Component と Project の違いについて調べていたのですが、僕にとって最もしっくり来た説明は以下のようなものでした。

Component がオブジェクトで、Project がインスタンスである。

つまり、Component というのは、それ自体が色情報や幅をもたず、どんなものであるかのみ定義します。一方、 Project は、それ自体が色情報や幅を持ち、どんなものであるかは定義しません。 具体的に仮のオブジェクトにあてはめて見てみましょう。 例えば、 c-button というボタンの Component を定義して、 Project と併用される場合を考えてみましょう。

<button class="c-button p-ArticleLink__button">詳細はこちら</button>
<button class="c-button p-Form__button">送信</button>

これを、オブジェクトっぽく書くと、下記のようになります。

Button.new(name: 'article', width: '100px', backgroud-color: 'black')  // projectに相当

Button.new(name: 'form', width: '50px', backgroud-color: 'blue') // projectに相当

プログラムのクラスなどをインスタンス化したことがある方はわかりやすいと思います。 このコードをCSSで表すと↓のようになります。

.c-button{
  display: block;
  border-radius: 10px;
}

.p-ArticleLink__button{
  width: 100px;
  background-color: black;
}

.p-Form__button{
  width: 50px;
  background-color: blue;
}

ってことで FLOCSS の Component と Project の違いをオブジェクトとインスタンスに当てはめて考えると、考えやすいよ〜ということでした。

【CSS設計】モジュール間の余白設計

こちらは先日のCSS設計の勉強会の内容のまとめです。 モジュール間の余白設計には以下の4つの方法があります。 1. 各モジュールに直接余白を付ける 2. コンテキストから画一的に指定する 3. 組み合わせを愚直に実装する 4. ユーティリティクラスをつける それぞれ、解説します。

各モジュールに直接余白を付ける

最もシンプルな方法です。この方法は、デザインでモジュールごとに余白が定義されていれば有効な手段です。また、「意図せずモジュールがくっついてしまった」というミスが無くなるところもメリットです。 しかし、デメリットとして、再利用するためのモジュールが再利用しづらくなります。

コンテキストから画一的に指定する

のセクション内での A モジュールと B モジュールの余白は〇px みたいな感じです。指定方法としては以下の感じです。

.section > * + * {
     margin-top: 80px;
}

組み合わせを愚直に再現する

デザインの設計余白を自動的に再現します。これにより、運用ルールを厳格にすることができるといったメリットがあります。しかし、全パターンを網羅するのは非常に困難です。 サンプルコードとしては以下になります。

.article + .cards {
    margin-top: 80px;
}

毎回ユーティリティクラスをつける

ユーティリティクラスを付ける方法は、ページ毎に柔軟に余白を設計できます。しかし、余白をすべて変更したいとなった時にHTMLすべてを書き換える必要があるため、とても困難です。

まとめ

以上、今回はCSS設計についてのTipsをまとめました。CSS設計は奥が深いですので、できるところから手をつけて、CSSのメンテナンス性を少しでも向上していきましょう。

---