今までOOCSS、BEMの考えを取り入れたコーディングをしていたのですが、今回SMACSSのルールに従ってコーディングしてみたので考え方と、感想をメモします。

今回コーディングするにあたり、下記を参考にしました。
詳しい内容に関してはこちらを参考にしていただければと思います。

Scalable and Modular Architecture for CSS 知っておきたいHTMLテンプレート設計法 - SMACSSのルール 1 | CodeGrid

SMACSSとは?

SMACSSはScalable and Modular Architecture for CSSの略です。
Scalable and Modular Architecture for CSSにはCSSをより体系立て、より構造化させることで制作とメンテナンスをより容易に行うテクニックと書かれています。

SMACSSの考え方

SMACSSには五つのルールが存在します。
Base - ベースルール
Layout - レイアウトルール
Module - モジュールルール
State - 状態(ステート)ルール
Theme - テーマルール

Base - ベースルール

ベースはサイトのデフォルトのスタイル設定です。 Reset.cssNomalize.cssもこちらに含まれます。 他によくベースで設定するものをあげるとするとベースのフォントサイズや行間、a要素の文字色や:hoverなど、タグに直接設定するものはベースルールとして記述します。

Layout - レイアウトルール

レイアウトは大枠を指定するためのルールです。 ヘッダー、フッター、ナビゲーション、メインコンテンツ、サイドバーなど、よくIDを使用して指定する要素が、レイアウトになります。 また、例えばページ内で段組みになっている部分の枠の部分などもレイアウトとして扱います。

このルールにはIDを使用するか、layout-やl-などの接頭語をつけることをSMACSSでは推奨しています。

Module - モジュールルール

モジュールは名前の通りモジュールを表すスタイルです。 BEMのBlock、Elementの考え方と似ています。 クラス名の書き方はモジュール名-サブクラス名の順番で書きます。 下記はモジュールルールを使用した例です。

<div class="l-column">
  <div class="module">
    <h1 class="module-title">タイトル</h1>
    <p class="module-description">説明</p>
  </div>
</div>
.l-column{
  width: 200px;
  margin: 0 auto;
}

.module{
  background: #fff;
  border-bottom: 1px solid #eee;
}

.module-title{
  font-size: 18px;
  font-weight: bold;
}

.module-description{
  font-size: 14px;
}

例えば上記のように記述します。.moduleがBEMでいうBlock、-でつないだものがElementにあたります。 そして全体の幅などはレイアウトで指定することで、いろんなところで使い回しやすいModuleができます。 またSMACSSは子孫セレクタや子セレクタの使用も許されています。

<div class="l-column">
  <div class="module">
    <h1>タイトル</h1>
    <p>説明</p>
  </div>
</div>
.l-column{
  width: 200px;
  margin: 0 auto;
}

.module{
  background: #fff;
  border-bottom: 1px solid #eee;
}

.module > h1{
  font-size: 18px;
  font-weight: bold;
}

.module > p{
  font-size: 14px;
}

タイトルと説明の部分のクラスをとり、上記のようなコードに変更しました。 ただし上記のような書き方をする場合はCSSの影響範囲や、HTMLの変更が無いかなど注意が必要です。

State - 状態(ステート)ルール

ステートはモジュールの状態を表すためのルールです。 例えば、.is-disable、.is-active、.is-current、といったような状態を示すClassをつけることで、見た目の変更を行ったりするときに使います。

<div class="l-column">
  <div class="module is-disable">
    <h1 class="module-title">タイトル</h1>
    <p class="module-description">説明</p>
  </div>
</div>
.module.is-disable{
  display: none;
}

上記の例では、.is-disableをつけることでoduleを非表示にする例です。

Theme - テーマルール

テーマは全体のスタイルを変更する場合に使うクラスです。 テーマは後から読み込ませたり、クラスを付加してあとからスタイルを変更させる場合に使います。 普段は使う必要がないかもしれませんが、状況に応じて使用します。

.body{
  color: #000;
}

たとえば上記のCSSの後に、次のCSSを読み込ませた場合

.body{
  color: #f00;
}

全体の文字色は赤色に変更されます。

SMACSSでコーディングしてみて

ここまで、SMACSSについてまとめてきましたが、今回私が個人的によいなと思ったところ、注意が必要だと感じたところをまとめました。

よいなと思ったところ。

  • OOCSSよりも構造がはっきりとわかりやすい。
  • BEMよりもクラス名が単調になりにくい。
  • Moduleを使い回ししやすい。
  • 接頭語の考え方(レイアウト:.l- / 状態.is-)が参考になった。

注意が必要なと感じたところ

  • CSSの強固さはBEMよりは劣る。
  • ルールを明確にする必要があるためコーディング前のCSSの設計がとても重要。

以前はBEMを参考に自分なりルールで構築を行っていたのですが、今回SMACSSを使用してみてこのルールは自分の中でもCSSをより理解しやすくできるように感じました。 大規模な開発では世の中にあるさまざまなCSS設計からいろいろと学び、より強固なCSS設計を行っていくのが今後必要だなと感じました。