概要
CSS設計について簡単にまとめてみた
まとめ
BEMとSMACSSを用いてCSSの書き方を工夫していきたい
参考本
CSS設計とは
- 何も考えなしにCSSを書いていくと、保守しにくい、改修に時間がかかってしまうCSSになってしまう
- そうならないために、保守しやすい(少ない工数で改修ができる)CSSを設計する必要がある
- CSSを設計=ルール決めをすることで、チームで考え方が統一されて、他人が書いたCSSを読む際に何を考えて書いたのが読み取りやすくなり、保守しやすくなる
CSS設計=ルール決め=保守しやすくなる(少ない工数で改修ができる)
良いCSSの設計とは
- 予測しやすい
- 再利用しやすい
- 拡張しやすい
具体的なCSS設計 BEM
- Block、Element、Modifierの頭文字であり、「ベム」と呼ばれるCSS設計手法
- 一番広まったCSS設計
Block
- 画面はBlockの集まりで構成されている
- BlockそれぞにれHTMLとCSSを用意する
- Block=論理的/機能的に独立したコンポーネント
Blockの書き方
- Blockの一番外の要素にBlockを表すクラス名を付与する
-
product-infoなどハイフンを用いて単語を分ける(キャメルケースでもよい)。クラス名にアンダースコアは使わないこと
Elementの書き方
- Blockのあらゆる要素は
Elementになる。そのElementを他のBlockで利用したはだめ -
Block名__Element名として書く。例:product-info__image
Block名__Element名とするメリット
- スタイルの衝突を防ぐことができる
- 自分が書いたHTMLに意図しないスタイルが当たる、自分の書いたCSSが意図しないHTMLに影響してしまう、などが怒らなくなる
- Block名を被らないようにすれば、BEMで書いている以上はスタイルの衝突が起こらない
- CSSのセレクタが単純になる
- クラス名がユニークになることで、単独のクラスセレクタを書くだけでよくなる
Modifierの書き方
- BlockやElementのバリエーションを作ったり、状態を表現する
- Block名_Modifiler名_値
- Blockが
messageの場合、message-successで成功を表現、message-errosでエラーを表現する場合message_type_success、message_type_error - Elementがheader-nav__itemの場合、
header-nav__item_state_active
Modifierの省略した書き方
-- で状態を表す
- messsage_type_sucess -> message--success
- messsage_type_error -> message--error
- header-nav__item_state_active -> header-nav__item--active
SMACSS(スマックス)
- BEMと同じようにCSS設計手法の一つ
- BEMにはないBlockの外側をどうすればよいかを解決できる
SMACSS:Baseルール
- サイトの土台となるCSSのルール群を用意する
-
noarmalize.css、reset.cssのどちかをBaseルールの土台として用意する
normalize.css
- タグによってはChrome、FireFox、Safariでサイズやマージンが変わってしまうのでその調整をしてくれるCSS
reset.css
ブラウザの持っているデフォルトスタイルをなくす
SMACSS:Layoutルール
- Blockを配置するレイアウトに関するルール
- BEMっぽくレイアウトを定義する
- 画面全体を一つのBlockとしてglobal-layoutとして考える。そして各エリアをElementの扱いにする
- 全体に関するものだけではなく、小さい粒度のUIのレイアウトについて
- グリッドで表現する箇所だけをブロック(Layout)として作成して(layout-gridなど)その要素の中にBlockを配置する
- Blockの中にBlockだが、Block(Layout)の中にBlockなのでクラス名をわかりやすくすれば問題なさそう
- position,z-index,top/right/bottom/left,float,width,marginに関してはLayoutに指定するのがベスト
SMACSS:Themeルール
- 何かしらの条件によりスタイルを変化させたい場合の設計
- テーマ種別を示すクラスをhtmlなどのルートに近い要素に設定してそのクラスを起点にスタイルを書き換えるCSSルールを用意するだけ
余白の設計について
プロジェクトの要件、複雑度などによって変えて行けばよい
実装方法の例としては以下がある
- Block自体に余白を設定する
- 余白専用Blockを用意する
- 余白専用のユーティリティクラスを用意する