CSSルールまとめ SMACSS. OOCSS. BEM

今回、何気なくフレームワークを使うことでなんとなく使っていたCSSルールをしっかり学んでみたので大まかな部分をメモしておきます。
理解した上で使っていき気づきがあったら追記していく予定です。
今回はSMACSS・OOCSS・BEMの３つルールについてしらべました。

SMACSS
OOCSS
1. ContainerとContentsに切り離す
2. StructureとSkinの分離
BEM
まとめ

SMACSS

ベース・レイアウト・モジュール・ステート・テーマの５つのカテゴリに分けたルールを元に設計する手法。

ベースルール

セレクタを使いスタイル適用をする。
IDやClassを使わないルール。
reset.cssや、normalize.cssなどがこれに当たる。

レイアウトルール

大枠のレイアウトルールの指定。
ヘッダー・フッター・ナビゲーション・メインコンテンツ・サイドバーなど

.layout-header {
…
}
.layout-footer {
…
}
.layout-nav {
}
.layout-main {
…
}
.layout-sub {
}

クラス指定で接頭語(layout-やl-)をつけわかりやすくすることを推奨。

モジュールルール

部品ごとにまとまりのクラス名とパーツごとのクラス名をつくる。

<div class=“module”>
<h3 class=“module-title”>タイトル</h3>
<p class=“module-description”>テキスト</p>
</div>

.module {
padding: 8px;
border: 1px solid #ff0;
}
.module-title {
font-size: 21px;
}
.module-description {
font-size: 18px;
}

ステートルール

モジュールの特定の状態のルールを上書きする。
例えば、

<div class=“module is-hidden”>
<h3 class=“module-title”>タイトル</h3>
<p class=“module-description”>テキスト</p>
</div>

.is-hidden{
display: none;
}
.is-active{
display:block;
}

モジュールに上書きすることで制御ができる。
Javascriptなどを使い制御したりする。
例: バーガーメニューのメニュー表示ON/OFFなど

テーマルール

main.cssを読み込んだ後、thema.cssを読み込みデザインスタイルを変更する。
main.css

body{
color: #000;
font-size: 100%;
background-color: #fff;
}

thema.css

body{
color: #666;

OOCSS

OOCSSとは、Object Oriented CSS(オブジェクト指向CSS)の略。

ContainerとContentsに切り離す

Container = 容器・箱
Contents = 中身
容器と中身で切り離すことで別の容器に中身を入れ替えることができる！という考え方。

容器に影響されないよう中身をパーツごとに指定

<div class=“contact”>
<h2 class=“title”>お問い合わせ</h2>
<p class=“text”>各項目を埋めてください。</p>
お名前: <input class=“input” type=“text”>
メールアドレス: <input class=“input” type=“mail”>
内容: <textarea></textarea>
<input class=“btn” type=“submit”>
</div>

とあるとして、

<div class=“order”>
<h3 class=“title”>注文内容</h3>
<p class=“text”>各項目を埋めてください。</p>
お名前: <input class=“input” type=“text”>
メールアドレス: <input class=“input” type=“mail”>
個数: <input class=“input” type=“number”>
<input class=“btn” type=“submit”>
</div>

と容器となるcontactからorderに変更したり、
中身の組み合わせが変わったとしても、パーツデザインに影響を受けない設計をします。
さらなる特徴として、HTMLタグに依存しないことです。
この例で言う、<h2 class=“title”>から<h3 class=“title”>のようにタグが変わってもCSSで指定することで影響を受けないようにする。

.contact{
….
}
.order{
….
}
.title {
….
}
.text {
….
}
.input {
….
}
.btn {
}

StructureとSkinの分離

Structure = 構造
Skin = 外装・見た目のこと

Structureで指定するもの。

共通する普遍的なもの。

.btn{
display: block;
border-radius: 3px;
text-align:center;
}

Skinで指定するもの。

変化する色やサイズを指定する。
色の指定

.btn-red {
background-color: red;
}
.btn-green {
background-color: green;
}

サイズの指定

.btn-medium {
width: 300px;
height: 50px;
}
.btn-medium {
width: 200px;
height: 40px;
}
.btn-small {
width: 100px;
height: 30px;
}

それらを組み合わせ次第で形が変わる。

<div class=“btn btn-small btn-red”>ボタン1</div>
<div class=“btn btn-medium btn-green”>ボタン2</div>

BEM

BEMとは、Block、Element、Modifierの３つに分けて命名規則を元にClass名を記述する方法。
- Block (=かたまり)
– Element (=要素)
– Modifier (=修飾子)

Blockとは

ブログだと、ヘッダー・フッター・ナビゲーション・記事・検索エリアなどのパーツのまとまりをいう。

<div.class=“article”>
</div>

Elementとは

Blockのかなの一つ一つのパーツがElementに当たる。
記事のBlockならばタイトル(h2)・記事カテゴリ(p)・記事本文(p)などのパーツであるElementからなる。

<div.class=“article”>
<h2 class=“article__title”>タイトル</h2>
<p class=“article__category”>カテゴリー</p>
<p class=“article__txt”>本文</p>
</div>

Modifierとは

Elementの中でも見た目が少し変わるもの作る場合に
改めてElementを作るのではなくModifier(拡張子)を使う。

Modifierの命名規則

Key(固有名詞)とValue(値)をつける。

<div.class=“article article__border_solid”>
<h2 class=“article__title”>タイトル</h2>
<p class=“article__category”>カテゴリー</p>
<p class=“article__txt”>本文</p>
</div>
<div.class=“article”>
<h2 class=“article__title”>タイトル</h2>
<p class=“article__category”>カテゴリー</p>
<p class=“article__txt”>本文</p>
</div>

この例だと一番最初の記事のみ枠を付けたいのでボーダーを付けた。