【デイトラ】実務編  CSS設計【DAY25~27】

講義動画で覚えておきたい項目が多く出てきた為、CSS設計において覚えおくべき概念を中心にまとめました。
講義動画を何回も見直してまとめたので、「あれどうだったけ！」を簡単に見返せる手引書的な役割を意識して作成しています。

CSS設計が目指すもの（大事）

CSS設計で修正しやすい(メンテナンスしやすい)CSSにする。具体的には以下4つ。

• 予測しやすい
  ルールが期待通りに動作することを意味する。
  例：クラス名にbuttonをつけるが、スタイルを当てたらなんと見出しにスタイルがあたってしまう
  　buttonというクラス名をつけたら、ボタンとして振る舞って欲しい。
• 再利用しやすい
  ポイントは「抽象的」。特定のところで使えるのではなく、広くいろんな場所で使えるようにつくっておく。
• 保守しやすい
  コンポーネント(1つのパーツ)を追加・更新・配置変更した時に、既存のCSSを修正する必要がないようにつくる。
  例：ボタンを1つ追加した時に他のパーツが壊れるようなことがあってはならない。
• 拡張しやすい
  誰もが扱えるCSSにしましょうという指標。
  人が増えても、自分が引き継いだあとでも等しく同じように作っていけるようにCSSをくんでいくこと。

コンポーネントを作ろう

コンポーネントは、ボタンのような小さいもの〜サイドメニューや記事全体など、大小あります。
以下からはコンポーネントの作り方について、紹介します。

再利用しやすくするためのポイント

大きく3つのポイントがあります。

共通しているのは「変更される可能性があるという点を考慮する」こと。コンポーネントは再利用されることが前提なので、中身のコンテンツ・使われる場所・要素セレクタは変わる可能性があるということを常に頭に置いておく。

文字数が変わる可能性を考慮する

widthやheightを固定値にしてしまうと、ボタン内の文字が増えた時にデザインが崩れる恐れがある(paddingの方がデザイン崩れを防げる印象)

使われる場所が変わることを考慮する

例えばボタンにあてたmargin-top等の余白は、移動先では必要ない場合もあるため、コンポーネントに余白はつけない

要素セレクタが変わることを考慮する

例えば見出し(h1~h4)のタグが変わる可能性があるため、この場合はclassに依存させると、見出しタグの数値が変わっても対応ができる

BEMでコンポーネントを作ろう

コンポーネント自身に余白は持たせることは基本的にせず、使われる先のエレメントで余白をつけてあげる＝管理しやすいサイトになる。

するとコンポーネントを使い回しても、他の箇所に影響を与えずに済む。

コンポーネントの大きさの単位

ATOMS：BEMでいうエレメントがほとんど存在しないブロック(例：ボタン、メニューのうちの1つ)

※組み合わせの仕方は現場により異なる。

ATOMSを作ってそれを組み合わせて少し大きめなコンポーネントを作る。という考え方は、基本的にはどこでも共通してくる概念なのでおさえる。

BEMとコンポーネントの関係

コンポーネントの大きさに関わらず、コンポーネント自身には余白や幅を極力持たせず、使われる先(エレメント)で余白を決める。

クラス名の考え方

コンポーネントを作る際、クラス名は以下を考えて作ること。

1. 具体的な名前にするか、抽象的な名前にするか
2. どれぐらい使い回すコンポーネントなのか

１については、以下の特徴に分かれる。

• 抽象的な名前：使い回ししやすくなる
• 具体的な名前：限定的な使い方になる

FLOCSSの設計手法

上書きできる順番＝レイヤー。
順番を担保することで、崩れるリスクの少ないCSSにしていける。

読み込む順番は基本的に上書きしてもOKの順番。
例：fundationではブラウザの標準のCSSを上書きしている

余白の作り方

参照：DAY27/CSS設計③：CSS設計を実際に使おう/projectのコーディング4の動画 22:30~

用意したコンポーネントを併せながら構築するのが基本だが、そのままコンポーネントを入れるだけだと余白ができていない状態。

余白の作り方は以下２つの方法がある。

• レイアウト(layout)を使って再現していく
• もう1個(上の)大きなコンポーネントを作り、その中で余白を定義してあげる

独自のルールも必要に応じ追加してOK

Javascriptと連動させる際は、idやclassの名前の接頭辞に「js」をつけることを推奨する。
これは、jsという接頭辞をつけることで、Javascriptと連動していることがHTMLファイルの中からも分かりやすくするためです。その結果、Javascriptと連動しているidやclassを誤って削除することを防ぎます。

まとめ

「〜のCSS設計手法を使えば間違いない」というものではなく、案件に応じてベストな方法を検討していくような形になります。今回紹介したものも一例にすぎません。

ただし、以下2つはCSS設計を考える上で「非常に重要な概念」となるので、押さえること。

• コンポーネント
• レイヤー

目指すべき4つの指標も改めて確認。

• 予測しやすい
• 再利用しやすい
• 保守しやすい
• 拡張しやすい