グローバルなCSSコンポーネントを避ける

CSS Talk vol.04 Manabu Yasuda
グローバルな
CSSコンポーネントを避ける

このような会話
をしたことはありませんか？

デザイナー
ここだけ少し見せ方変えたいです。
コーダー
このコンポーネントはサイト共通なので、
サイト内のすべてに反映されますがいいですか？
…（見せ方をちょっと変えたいだけなんだけどなあ）。

安田学 (Yasuda Manabu)
株式会社 TAM
マークアップエンジニア
https://github.com/manabuyasuda
@ Gaku0318

「ここだけ少しデザインを変えたい」
という要望があるときに、
コーディングには2つの選択肢があります。

1. OOCSSのSkinや BEMのModifierで拡張する
2. 別のコンポーネントとして追加する

拡張するのか、別のコンポーネントにするのか、
どちらが適切？

拡張するパターンが増えてくると
適切な名前がつけられなくなってしまって
連番になってしまったりすることも。

パっと見た感じでは、同じ見た目だけど
適切なルールセットが違う場合も。

text-align: center;margin: 0 auto; or
float or inline-block or table or flexbox

グローバルなCSSコンポーネントは
迷うことが実は多い。

グローバルなCSSコンポーネントは避けて
ローカルなCSSコンポーネントを
つくっていくのが、ベター。

ローカルなCSSコンポーネントを
つくる方法。

名前空間（接頭辞・プレフィックス）をつ
けて擬似ローカルスコープをつくる。

FLOCSSをはじめとして
コンポーネント名に名前空間をつけることが
一般的になってきています。

・Layout - .l-
・Component - .c-
・Project - .p-
・Utility - .u-

でも、今必要なことは
コンポーネントの役割を示すことではなく
そのコンポーネントがどこで使われるのかを
示すこと。

・HomePage - .home-
・TopPage - .top-
・Products - .products-

どのコンポーネントが
どの範囲で共通化されているかを
共有・把握することができるようになります。

このような会話
ができるようになります。

デザイナー
ここだけ少し見せ方変えたいです。
コーダー
このコンポーネントは製品関連ページで
共通化しているので、
その中のすべてに反映されますがいいですか？

ローカルなCSSコンポーネントは
影響範囲が把握できるようになります。

デザイナー
ありがとうございます！
デザイン送りますね。
コーダー
このコンポーネントは
このページ専用にしているので大丈夫ですよ。

無理に共通化しないことで、
円滑にデザインの変更ができるようになります。

コンポーネントのスコープの
目安は？

・ホームページ
・カテゴリートップページ
・カテゴリー詳細ページ
・採用情報ページ
・検索結果ページ
・サイトマップページ

はじめにザックリと分けて、必要に応じて
細分化していく。
スコープの切り方は
案件の内容とデザイン次第で決めていく。

CSSはデザインを実現するための
ツールの1つ。
CSSがデザインのボトルネックに
ならない工夫が必要。

完璧なコードを目指すより
いつでも柔軟に変更できるコードを
目指していきましょう。

ありがとうございました。

Recommended