はじめに
今回は『CSS設計完全ガイド』という書籍の内容を元に、実際のホームページを見ながらCSS設計にふれてみよう！という内容になっております。
- とりあえずデザインやデモサイトを見ながらHTML、CSSを使ってコーディングできるけど、これからどのようにレベルアップすれば良いかわからない。
- CSS設計って聞いたことあるけど、難しそう...
そんな方に読んでいただければと思います。
CSS設計を始めるための目を養う
CSS設計において大切な２つの法則があります。
- 抽象化する
- 分ける
「抽象化するってなに？」「分けるってなにを？」って感じだと思いますので、よりわかりやすくすると
- 共通する部分を見つける
- （パーツの大きさ・役割で）分ける
となります。
では、上のことを意識しながら弊社のホームページを眺めてみてください。
共通する部分はわりと見つけやすいのではないでしょうか。
例えばこんなものが挙げられます。
タイトル
メディア
ボタン
また、少し視野を広げると色も共通していますね！
Adobe Color
こんな感じで共通項が見つかれば、各々にクラス名やスタイルを振らなくても、共通のパーツとして使い回すことができそうです。
人によってCSSが変わる問題
今回はわかりやすく「ボタン」と「メディア」という２つのパーツを取り上げていきたいと思います。
ボタンコンポーネント
先ほどのホームページを見るに、ボタンはどのセクションでも共通のデザインです。
あらかじめページで共通のボタンとスタイルを作っておけば、ボタンが必要になったタイミングで<a class="btn">を設置するだけよさそうですね。
メディアコンポーネント
では今度は「メディア」を見てみましょう。
こうした画像とテキストフィールドが横並びに配置されたパーツ（コンポーネント）をよくメディアと呼びます。
いま上で紹介したボタンが含まれていますね。
ボタンを先に見ていたので、「<div class="media">の中に<a class="btn">が入っている(ネストしている）」と想像ができます。
しかし、先にメディアを見ていたとしたらどうでしょう？
A. ボタンが独立した一つのパーツなのか
B. メディアの中にあるボタンなのか
少し迷ってしまいませんか？
これこそ、CSS設計における問題点です！
具体的にクラス名を付けるとわかりやすいかと思います。
ボタンのクラス名に注目してください。
// Aパターン
<div class="media">
<img src="../images/sample.jpeg" alt="sample" class="media-img" />
<div class="media-body">
<h3 class="media-title">タイトルタイトルタイトル</h3>
<p class="media-text">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="btn">詳細はこちら</a>
</div>
</div>
こちらはボタンが独立したパーツなので、「.btn」というクラス名です。
// Bパターン
<div class="media">
<img src="" alt="" class="media-img" />
<div class="media-body">
<h3 class="media-title">タイトルタイトルタイトル</h3>
<p class="media-text">
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
</p>
<a href="#" class="media-btn">詳細はこちら</a>
</div>
</div>
こちらはメディアの中のボタンのため、「.media-btn」というクラス名です。
CSS設計なのにHTMLの話？と思うかもしれませんが、このクラス名の付け方というのはCSSでスタイルを当てていく上でとても大切です！
この問題の答えとしては、基本的にはAパターンで実装する方がCSS設計としては正しいです。
メディアというパーツの中に、異なるパーツであるボタンが含まれている、ということですね。
この 「どこまでが1パーツなのか」 という感覚を養うことで、変更に強い、しっかりとしたCSSを設計していくことができます！
まとめ
CSSの難しいところは、共通化しすぎても、しなさすぎてもダメというところだと思います。
なんでも上書きしていけばとりあえずのデザインはできてしまうため、いろいろな人が考えなしにコードを書いていくと、最終的にとんでもないカオスCSSが生み出されるわけですね。
今回は本当にさわりの話だけで、具体的なCSSのコードは紹介しませんでしたが、次のCSS設計レイアウト編でより実践的なCSSの書き方をまとめて紹介したいと思います！