CSSのコンポーネント設計ってなに?

そもそもコンポーネントって何?

簡単に言うと、機能や立ち振る舞いを明確に分離する、という意味合いだそうです。
CSSだと、それぞれのclassやidが意味するものを明確にするということですかね。

また、明確な分離を実現するためには、カプセル化が重要です。(また新しい言葉が・・・ww)

カプセル化

まず、コンポーネントの構造やデータなどを隠します。
その上で外部からの許可された操作のみを受け付け、内部の仕様変更が外部に影響しないようにする。というのがカプセル化の概要です。

そうすることによって、コンポーネントの変更が別のコンポーネントを壊してしまうという状況を防ぐことができます。
再利用やメンテナンス性が高まるので良いことづくめですね。

See the Pen Wxzkxp by shimizu (@ryo0326) on CodePen.0

上記の例ではIDセレクタまで用いているので詳細度が高く、他のCSSルールによって上書きなどはされにくいです。
ですので、一見カプセル化を実現できているように見えるのですが下記のような形で簡単に汚染されてしまうんです。

See the Pen ZOxXOx by shimizu (@ryo0326) on CodePen.0

.titleのところでbackground-colorを指定してしまったのが原因ですね。
たったこれだけのことで簡単に見た目が崩れてしまいます。

じゃあ、どうすればいいの?ということで
代表的なコンポーネント設計のアイデアをまとめましたので一緒に確認していきましょう!
*まとめ次第、記事更新します(°_°)

コンポーネント設計アイデアまとめ

OOCSS

OOCSS(Object Oriented CSSの略でオブジェクト指向CSSのこと)には2つの原則があります。

  • 構造と見た目の分離
  • コンテナーとコンテンツを分離

この「分離」というところが非常に重要になってきます。

構造と見た目の分離

ごちゃごちゃ言ってもよくわからないのでとりあえず以下のような状況から始めます。

See the Pen BzAwPR by shimizu (@ryo0326) on CodePen.0

こ子で気付くべきは、アラートメッセージ自体の基本的な構造は変わらないということです。
ですので基本構造であるalertの部分だけを分離させます。

See the Pen jAzGZk by shimizu (@ryo0326) on CodePen.0

こうやってバリエーションを増やす形にすれば、急にinfoというアラートメッセージが必要になったとしてもすぐに追加することができます。

コンテナーとコンテンツを分離

これは単純に、「場所に依存しないコードを書くようにする。」というとわかりやすいかもしれません。
例えばヘッダーやフッターにロゴを置く場合、ヘッダーには普通のサイズのロゴ、だけどフッターには小さいロゴを置きたいという場合があるでしょう。
その場合にいちいちロゴのサイズを指定するとキリがないのでlogo-smallというクラスを指定すると良いでしょう。

See the Pen pbLWXO by shimizu (@ryo0326) on CodePen.0

こんな感じで書けば場所には依存することなくサイドバーなどにも置くことができます。

と、かなり簡単ですが基本的にはこの書き方に沿って構築することで大きな仕様変更などでも他のCSSルールに汚染されない形で書くことが可能になります。

コメントを残す

メールアドレスが公開されることはありません。