今回、何気なくフレームワークを使うことでなんとなく使っていたCSSルールをしっかり学んでみたので大まかな部分をメモしておきます。
理解した上で使っていき気づきがあったら追記していく予定です。
今回はSMACSS・OOCSS・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>この例だと一番最初の記事のみ枠を付けたいのでボーダーを付けた。
Block__名詞_値の命名規則なので
article__border_solidだいたい、articleブロックのborderがsolidなのだということが誰が見てもわかるようになる。
この調子で、ElementにもModifierをつけることも可能。
その命名規則は
Bloack__Element_名詞_値となる。
例えばタイトルを変えたい場合
article__title_font_smallのような形にする。
セパレーターの基本規則
- BlockとElementの区切りの間は( _ )アンダースコアを２つ
- ModifierはKeyとValueで区切りる
- 単語の区切りは( – )ハイフンで区切る
まとめ
私は普段CSSフレームワークとしてFoundationを使用しており、OOCSSの形は、よく目にしていた気がします。なので、感覚的にOOCSSの形を自分なりにやっていた感じです。しかし、感覚でやっていた文汎用性に欠けており使い勝手が悪かったです。今後、意識して記述していきたいです。
コメント