前案件でBEMチックな書き方をして、あまりのクラス名の長さに
キィェエエエ！！ってなった後で、
CodeGridさんでSMACSSについてのステキ記事を見つけたのでメモ。
※以下、CodeGridさんの記事に書いてることを、自分が後で見るようにプチ要約したものです。
本記事をまだ読んだことが無い人はここよりも、本記事の方をじっくり読むのをお勧めします。
SMACSSによるCSSの設計 - ベースとレイアウト | CodeGrid
CSSカテゴライズ
5つにカテゴライズして、それに準じた名前を付ける
1.ベース
2.レイアウト
3.モジュール
4.状態（ステート）
5.テーマ
#1.ベースルール
サイト全体で要素そのもののデフォルトスタイル
body
a:link
table ...
1パターンしかないからといって、ここでデザインを指定しない。
CSSのリセットは使用を避けて、なるべくNormalize.css を使う。
#2.レイアウトルール
ページのエリア分け
.l-main
.l-sub
プレフィックスでl-をつけて一目でわかるように。
IDが絶対だめってわけじゃないけど、
ID要素は重複利用できなかったり、スタイルの上書きがむずかしくなるから、なるべくクラスを使う
CSSでは位置や配置の指定をする。
（フォントや色はモジュールや状態の方で指定する）
##子孫セレクタを使って分岐
.l-main {
width: 70%;
}
.l-fixed .l-main {
width: 600px;
}
.l-fixedのついてるのはpx指定、そうでなければ％指定
#3.モジュールルール
再利用可能なパーツ
・ ロゴ
・ナビゲーション
・タブ
などページを構成するパーツすべて
レイアウトパーツの中に入れて、
どこに置いても再利用できるように独立させておく。
##レイアウトとモジュールの合わせ技
<div class="l-container-12">
<div class="l-grid-06">
<div class="box">box1</div>
</div>
<div class="l-grid-06">
<div class="box">box2</div>
</div>
</div>
-
レイアウト
.l-grid-01~nという風に幅が違うクラスを量産する
これで、レイアウトの調整が無限大！ -
モジュール
.boxは汎用的なの
##モジュールの命名規則
親モジュールの名前をプレフィックスでつける
<div class="item">
<p class="item-text"></p>
</div>
##クラス名をつけるタイミング
モジュール全部にクラス付ける必要はない。
- li、a ...クラス名をつけなくてもいいよ
- div、span ...クラス名つける
liは階層が深くなる場合>を使う。
見出しはあとでh2→h3に変わったり、
階層が変わる場合もあるから、クラス名付いたdivで囲む方がいいっぽい。
##親要素での使い分けはしない
同じ要素だけど置く場所が違うものは、
親要素によっての指定はしない。
<div class="l-main">
<div class="search">~</div>
</div>
<div class="l-sub">
<div class="search">~</div>
</div>
こうじゃなくて
<div class="l-main">
<div class="search">~</div>
</div>
<div class="l-sub">
<div class="search search-vertical">~</div>
</div>
こう。
.search-verticalに指定することで、どこに移動してもスタイルを維持できる。
#4.状態ルール
特定の状態によってスタイルを上書きする
状態の切りかえはJavascript
-
結果がtrueの場合のとき
プレフィックス is- -
表示/非表示
.is-hidden {}
.is-error {}
.is-active {}
例
.is-dialog-hidden
.is-tab-active
!importantはなるべく避ける。
状態ルールはモジュール名を付けてあげた方が競合しなくてよさそう。
#5.テーマルール
##テーマ管理用のCSS
.box {
border: 1px solid;
}
.box {
background-color: #eee;
border-color: #ccc;
}
色に関わる部分をテーマで管理する
##プレフィックス theme-
.theme-border {
border-color: #ccc;
}
.theme-background {
background-color: #eee;
}
SMACSS のゴール
- HTMLとコンテントのセマンティックな価値を向上すること
- 特定の HTML 構造への依存を低減すること
参考サイト
「自分以外の誰が見てもわかる」＋「CSSを編集することがあまりない」
そんな更新しやすい組み方ができたらいーなーと思う今日この頃。