*SMACSS(スマックス)について自分なりのまとめ

2015.12.5 0Comments CSS HTML5 WEBデザイン
SMACSS(スマックス)について自分なりのまとめ

SMACSSとは、Scalable and Modular Architecture for CSSを略語して「スマックス」と読みます。

CSSには命名規則について悩んだりしますが、その対策のためOOCSSやBEMといったルール作りが定番でした。そのOOCSSやBEMをいいところを交えてできた新しいルールがSMACSSです。「ベース」・「レイアウト」・「モジュール」・「ステート」・「テーマ」の5つのカテゴリーに分けます。
ちなみに私はこの2つのサイトを読ませて頂きました。

レイアウトルール

「ベース」

ようするに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」はもう使用しない。

.l-header {
margin-bottom: 20px;
}

.l-footer {
border-top: 1px solid gray;
}

.l-main {
float: left;
width: 80%;
}

.l-sub {
float: right;
width: 20%;
}

px指定の場合は「.l-fixed」と-fixedとする。

メニュー、カラムの場合はグリッドで表す
労せずに、960グリッドシステムを利用した方が早い。