1日目 css設計の概念についてざっくりまとめ
今日初めてcss設計について学んだので、
軽くまとめておきます。
1. CSS設計ってなんだ？
煩雑なcssにならない為に、決められた規則に則って記述する。
CSS設計のいいところ
・予測しやすい
・再利用しやすい
・拡張がしやすい
・保守がしやすい
逆に破綻しやすいコード（やってはいけないもの）
①HTMLの記述に依存しているもの
h1 {
background: #fff; /* h1がpタグに変更になったら,,? */
}
→場合にもよるが、クラス名を付与して管理する方が良い
②スタイルを打ち消しているもの
<!-- HTML -->
<p class="box">四角</p>
<p class="box underline">下線だけ</p>
/*css*/
.box {
background: #fff; /*ホワイト*/
border: 1px solid #ededed;
}
.underline {
background: #000; /*ブラック、上のホワイトをわざわざ打ち消している*/
}
無駄が多い。
③絶対値を多用する
.box {
width: 368px;
height: 200px;
margin: 30px 60px;
}
パーセントなどの相対値を用いることで、
メンテナンスしやすくなる。
④指定がむやみに多い
div.box { /*.boxで十分*/
background: #fff;
}
div.box dd p { /* クラス名を付与する等で解決*/
background: #fff;
}
詳細度をむやみにあげてしまい、
後から書いたコードがうまく効かなくなる。
下記のように、セレクトを限定的にかく方が、管理が容易になる。
.nav li {
list-style: none;
}
.nav > li {
list-style: none; /*こちらの方がより限定的*/
}
CSS設計の考えを用いれば、より管理しやすくなる！
CSS設計はコンポーネント設計の考え方の一つ。
コンポーネント設計・・・一つ一つを部品化し、分離させる。
2.代表的なCSS
2-1. OOCSS
共通部分をまとめて記述し、それ以外の個別部分を別のクラスで管理する。
例えば同じ大きさの吹き出しで、背景が異なるものを二つ記述するとき、
.balloon01 { /*共通部分*/
height: 100px;
width: 100px;
}
.color01 { /*異なる部分を分けてかく*/
background: #fff;
}
.color02 {
background: #eee;
}
→再利用はしやすいが、一つに多くのクラスを付与しないといけない場合がある。
2-2. BEM
Block Element Modifier の略。
この三つの概念に分けてCSSを記述していく。
Block
大枠。ナビリストや一つの吹き出し、ボタンリストなど。
例） .nav, .container
Element
Blockを構成する要素。
block名＋アンダーコア二つ+エレメント名で記述する。
例）.nav__comment
こうすることで、そのブロック外で使用してはいけないことを示すことができる。
Modifier
状態変化を表す。
block名__要素__modifier で表す。
例）.nav__comment_alert
しかし、単にアンダースコアを命名したい場合、
どこまでがどの役割かがわからない！
MindBEMding
Elementをアンダースコア二つ、
Modifierをハイフン二つで区切る命名規則！
例）.nav__comment--alert
欠点：クラス名が長くなりがち
2-3. FLOCSS
クラスを３つに分類する。
Foundation
デフォルトの初期化や基本的な全体設定など、ページの下地となるもの。
Layout
ページを構成する大枠の要素。
ヘッダーやサイドバー、コンテナーブロックなど。
Object
Objectはさらに三つに分類されている。
-component
使い回しのきく小さな単位のコンポーネント。
接頭辞に-cをつける。
-Project
そのページ独自で使用されているもの。
ページの多くの部分をしめる。
接頭辞に-pをつける。
-Utility
上記に合致しない、わずかな調節のためのお助けクラス。
接頭辞に-uをつける。
Modifierの考えがFLOCSSにもある！？
→接頭辞にis-をつける。