プログラミング

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

201505230102
Pocket

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

SMACSS

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

ベースルール

セレクタを使いスタイル適用をする。
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の3つに分けて命名規則を元に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>

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

Block__名詞_値

の命名規則なので

article__border_solid

だいたい、articleブロックのborderがsolidなのだということが誰が見てもわかるようになる。

この調子で、ElementにもModifierをつけることも可能。
その命名規則は

Bloack__Element_名詞_値

となる。
例えばタイトルを変えたい場合

article__title_font_small

のような形にする。

セパレーターの基本規則

  • BlockとElementの区切りの間は( _ )アンダースコアを2つ
  • ModifierはKeyとValueで区切りる
  • 単語の区切りは( – )ハイフンで区切る

まとめ

私は普段CSSフレームワークとしてFoundationを使用しており、OOCSSの形は、よく目にしていた気がします。なので、感覚的にOOCSSの形を自分なりにやっていた感じです。しかし、感覚でやっていた文汎用性に欠けており使い勝手が悪かったです。今後、意識して記述していきたいです。

Pocket