1. Qiita
  2. 投稿
  3. CSS

SMACSSによるCSS設計

  • 367
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

前案件で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

main.css
.box {
  border: 1px solid;
}
theme.css
.box {
  background-color: #eee;
  border-color: #ccc;
}

色に関わる部分をテーマで管理する

プレフィックス theme-

theme.css
.theme-border {
  border-color: #ccc;
}
.theme-background {
  background-color: #eee;
}

SMACSS のゴール

  • HTMLとコンテントのセマンティックな価値を向上すること
  • 特定の HTML 構造への依存を低減すること

参考サイト


「自分以外の誰が見てもわかる」+「CSSを編集することがあまりない」
そんな更新しやすい組み方ができたらいーなーと思う今日この頃。