SMACSSによるCSS設計

More than 5 years have passed since last update.

前案件で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を編集することがあまりない」

そんな更新しやすい組み方ができたらいーなーと思う今日この頃。