11/06学習内容（CSS設計）

CSSの命名規則

後から書き換えたり、他人が見る想定でCSSを書いていく

「良いCSS」の４条件

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

予測しやすい
class名のつけかたにルールがある、スタイルの優先度が整理されている

• 修正する時に、CSSの変更で予想外のことが起こりにくい

• 修正する時に、どこにどのスタイルが当たっているかの予測がつけられ（探す手間が省ける）

• 自分で書いているときに、スタイルをどう当てるかを迷わずに書くことができる

再利用しやすい（コンポーネント）

• 使いまわせるパーツのスタイルはまとめる

• 記述量が大幅に減らせる

• 修正する時に、一括で変更ができる

保守しやすい
「修正・変更した時にわかりやすい書き方にする
予測していないスタイルの上書きが起こったり、重なり順を書くのに他の素のz-indexを考えないといけなかったり、一つ書き換えたら全く別のものが崩れてしまっていたりと、カオスな状態になってしまう

拡張しやすい
追加変更があったときに、最低限のコストで作れるようにする。
追加変更がきたときに、手間と時間をかけずにコードが書ける
変更があったとしても、容易に変更ができる

BEM概要

「Block_Element__Modifire」
Block：区画
Element：要素
Modifire：装飾、詳細

構造上Elementにするのにも限界を感じる場合、「Blockの中でBlockを作る」
イメージheaderというBlockのなかにheader-navというBlockを作る

Mix
一つの要素に複数のclassをつけること
classごとに責任を分けるため

接頭辞のグループ分け

layout（レイアウト）
大きな「枠」専用のグループ
widthやmarginやpaddingなどのようなレイアウトに関わるスタイリングのみ行う

module（モジュール）
どこでも使いまわせるパーツのグループ
基本的に、レイアウトに関わるスタイリングは行わない。

utility（ユーティリティ）
基本的にclass名がそのまま、CSSのプロパティ名と値を表現しているもののグループ
名前の付け方はEmmetを参考にすることが多い
同じスタイルを高頻度で使い回すWebサイトのデザインや、Web開発で主に使われる。

気をつける点

詳細度をむやみにあげないこと
!important;等

「見た目から命名する」は避けて「意味や役割からつける」
NG
.class-name__color-red {
color: red;

OK
/* 警告用の色として扱う */
.class-name__warning {
color: red;
}
thenounproje