SMACSS & Sass導入してのまとめ

SMACSS

ベースルール

• Normarize.css は最初に読み込む

body {
  color: #555;
  background: #fff;
}
 
a:link {
  color: #660;
}
a:visited {
  color: #990;
}
a:hover,
a:active,
a:focus {
  color: #f00;
}
input[type=text]{
  // フォームパーツの基本スタイル
}

レイアウトルール

• 詳細度に影響しないよう、classにする
• プレフィックスは l-
• ページごとに異なるモジュールの位置調整はここで持つ。上部にインデックスをまとめる。
• SMACSSのオフィシャルにはないけど、レイアウトルールにもサブレイアウトを導入。

.l-header{
  width:100%;
}
.l-header > .inner{
  max-width:980px;
  margin:0 auto;
}
.l-content{
  background-color:#000;
}
.l-content > .l-content-inner{
  max-width:980px;
  margin:0 auto;
}
// サブレイアウト、l-contentと一緒に使用する前提
.l-content.l-content-simple{
  margin-bottom:30px;
}

.l-main{

}
.l-sub{

}
.l-footer{
  width:100%;
}
.l-footer > .l-footer-inner{
  max-width:980px;
  margin:0 auto;
}
.l-grid{

}
.l-grid-item{

}
.l-grid-item-6{

}
.l-grid-item-4{

}
.l-grid-item-3{

}
.l-grid-item-2{

}

モジュールルール

モジュール内のclassはモジュール名をプレフィックスにする

/* 汎用的な box */
.box{

}

/* プレイヤー */
.player{

}
.player .player-name{

}



/* ボタン */
.btn{

}
/* ボタンのサブクラス（スキン） */
.btn-next{

}

状態ルール

• プレフィックスは is-
  • is-hidden
  • is-disable
  • is-error
  • is-active
• 状態ルールは汎用的でないものはモジュール名を含める
  例）is-btn-disable
• 状態の変化はJSによる（とは限らない）

テーマルール

• プレフィックスは theme-

決めごと

• 子孫セレクタと子セレクタの使い分け
  liは階層が深くなる可能性があるなら > を使う。
• クラス名をつけるか否か
  liやaなど要素自体にセマンティックな意味合いがある場合はつけなくてもいい
  divやspanなど汎用的なタグには必ずつける
• 親要素によるスタイル適用わけはしない。
  サブモジュールを使う

SMACSSの難しいところ

• モジュールとレイアウト、どちらに属するか
  モジュールは使いまわしのできるパーツであることを優先させ、レイアウトルールが各ページごとのベタな位置調整を持つ形になる。
• モジュール内のclass名について、階層を持たせるととても長くなるので省略したくなるが、原則省略しない。
  ただし、汎用的な意味合いのclassのみ、検討の上、階層ルール適用なしでよしとする。
  例）.inline_link … 文章内の下線リンク付きリンクとか

Sass

変数

グローバルの変数として持つ候補は以下。

• font-size（rem指定で持つ）
• font-family
• 複数の箇所で使う color
• 複数の箇所で使う background-color
• content-max-width
• ローカル変数の使い方は作業者におまかせ

ネスト

• モジュール内にとどめる
  （モジュール内であればネストの階層は制限しない）
• 各セレクタの中でメディアクエリーのネストはしない。

Mixin

• 結局何か所にもコードが出力されるので使いどころに気を付ける

継承

• 使う場合は、プレースホルダーセレクターを使う（%はじまり）

include

• SMACSSの各ルールごとに、さらにモジュールはモジュール単位でファイルを分割して持つ