SMACSSとは、Scalable and Modular Architecture for CSSを略語して「スマックス」と読みます。
CSSには命名規則について悩んだりしますが、その対策のためOOCSSやBEMといったルール作りが定番でした。そのOOCSSやBEMをいいところを交えてできた新しいルールがSMACSSです。「ベース」・「レイアウト」・「モジュール」・「ステート」・「テーマ」の５つのカテゴリーに分けます。
ちなみに私はこの２つのサイトを読ませて頂きました。
レイアウトルール
「ベース」
ようするにbody部分、Reset.cssやNomalize.cssで対応は十分です。
「レイアウト」
ヘッダー、フッター、サイド、ナビメニュー、コンテンツとして大きく分類させたフレームワーク部分。
「layout-hogehoge」や「l-hogehoge」などの接頭語をつけることをSMACSSでは推奨している。
「モジュール」
レイアウトの中の構造の具体的なパーツのことです。タイトルや説明、日付やタグなどの部品として分けるCSSです。
「module-title」や「module-hogehoge」などの接頭語をつけることをSMACSSでは推奨している。個人的に「m-」でもいいじゃない？？
「ステート」
見た目の変更を行う場合、特定の条件があった場合に使用する。
「is-hogehoge」と「is-」の接頭語をつけることをSMACSSでは推奨している。その他には「.is-disable、.is-active、.is-current」のように状態を表しやすいclass名がよい。
「テーマ」
カラーのこと、背景色、文字色すべて。
デフォルトのcssは「main.css」を読み込ませて「theme.css」で読み込みデザインスタイルを変更する。
■main.css（デフォルトで読み込む）
■theme.css（スタイルを変更させる）
その他のルール
基本的にどのパーツも幅の「px」はもう使用しない。
[css]
.l-header {
margin-bottom: 20px;
}
.l-footer {
border-top: 1px solid gray;
}
.l-main {
float: left;
width: 80%;
}
.l-sub {
float: right;
width: 20%;
}
[/css]
px指定の場合は「.l-fixed」と-fixedとする。
メニュー、カラムの場合はグリッドで表す
労せずに、960グリッドシステムを利用した方が早い。
