Zenn
🍅

SMACSS の基本を理解する

2025/02/21に公開
CSS
smacss
tech

SMACSS公式の内容は大別して2章

今回は、SMACSSについて調べたので自己解釈を記述していく、良かったら見ていって欲しい
そしてまず最初に思ったことを言わせてくれ

略語に略語を使われると読みがややこしいわッ！！！(笑)
「CSS」の部分は（シーエスエス）て読むんかーい！！

「スケーラブル アンド モジュラー アーキテクチャー フォー カスケード スタイル シート」て読んじゃったわ（そもそもが名前長いよ、ラーメン屋のコールかよ）

SMACSSには公式サイトがあり、下記サイトのPDF(日本語版)があるのが非常にありがたかった
SMACSS公式

述べ110ページに渡るPFDだが、その内容は大別して2つの章となっていると感じた

それが 「構造」「思想」 の2章だ

「構造」とは、SMACSSの基本概念を説明しているもので
「思想」とは、あらゆる実装場面における、CSSベストプラクティスの考え方や、CSSの機能について説明されている

但しサンプルコードがHTML要素をスタイル側で直接指定していたりと、幾つかの内容が2025年2月現時点におけるCSSのスタンダードとは若干の乖離があるのでその辺は注意して欲しい

そんなこともあり正直「思想」部分は読むのが結構シンドイのだが、CSS設計に関する考え方や課題に対するアプローチは現代でも非常に学びになるので一読の価値はあるように思う

また「構造」が1 ~ 33ページなのに対し、「思想」が34 ~ 110ページとなっているので、SMACSSの概要だけ知りたいぜー、て人は33ページ辺りまで読むことをお勧めだ

この記事も「構造」にフォーカスを当てた記事となるので、ご理解を頼む

SMACSSはCSSをカテゴリー別に管理する

先ず基本として、SMACSSではCSSを5つのカテゴリーに分類する、それが

  1. ベース
  2. レイアウト
  3. モジュール
  4. 状態
  5. テーマ

それぞれの使い方を見ていこう

ベース

ベースとはページ全体を通して設定される言わばデフォルトのスタイルだ、リセットCSSやノーマライズCSSなどを想像してもらえると分かりやすいと思う。
またそれらリセット系のCSSを利用する場合もこのベースカテゴリーに含まれる

ベーススタイルの例(PDF11ページ引用)
body, form {
    margin: 0;
    padding: 0;
}
a {
    color: #039;
}
a:hover {
    color: #03F;
}

レイアウト

レイアウトとは、その名の通りページ上の要素(後に紹介するモジュール)をレイアウトするためのスタイル群で、使用する位置・場面がほぼ固定されている「固定レイアウト」 と 汎用的に利用される「汎用レイアウト」 の2種類レイアウトが存在する。（固定・汎用レイアウト、とは自己解釈の際に自分が勝手につけた命名なので公式見解ではない）
それぞれがどう言った物かと言うと

固定レイアウト

「Header、Footer、サイドバー」と言った、おおよそ1ページに付き1つしか設置されないパーツ
SMACSS公式ではIDセレクタでパーツ名をそのまま用いていた

固定レイアウトの例(PDF13ページ引用)
#header, #article, #footer {
    width: 960px;
    margin: auto;
}
#article {
    border: solid #CCC;
    border-width: 1px 0 0;
}

汎用レイアウト

「固定レイアウト」では無いものがこちらに属すると考えてよいだろう。
ポイントとして汎用レイアウトのclass名には「l-」または「layout-」という接頭辞をつけることで、レイアウトカテゴリーであることを推測できるようになってることだ。
更にグリッド的な使い方をしているものについては「glid」と名前に入っている場合もある

汎用レイアウトの例
.l-container {
    width: 100%;
    max-width: 1080px;
    padding: 0 20px;
}
.l-container-glid{
    width: 50%;
}

モジュール

モジュールとは、ボタンや見出しといった所謂パーツ・コンポーネントの事で、大概のスタイルはこのモジュールに属するだろう

モジュール例
.button {
    width: 280px;
    height: 80px;
    background-color: #000;
    color: #fff;
}
.button:hover {
    opacity: .8;
}

※ 本来 .button と言うclass名は汎用的過ぎて良くないが、今回の本筋に関わる部分では無いので、分かりやすさ優先とした命名にしている

また .button の色違いなどを作る際は、マルチクラスを用いて対応する
これをSMACSSでは サブモジュール と呼んでいる

サブモジュール追加
.button {
    width: 280px;
    height: 80px;
    background-color: #000;
    color: #fff;
}
.button:hover {
    opacity: .8;
}
/* ↓ サブモジュール追加 */
.button-more {
    background-color: blue;
}
サブモジュール使用
<button class="button button-more">ボタン</button>

またSMACSS公式で明記されていないが、モジュールに margin（外側の余白）を極力持たせない方が良い。
理由は単純、外側の余白のせいでモジュールが再利用しずらくなるからだ。
もし外側の余白を付けたい場合はレイアウトカテゴリーにクラスを追加して対応しよう

モジュールクラス
.button {
    width: 280px;
    height: 80px;
    background-color: #000;
    color: #fff;
    margin: 30px 0; /* これはレイアウトクラスに任せるべき */
}
レイアウトクラス
.buttonLayout {
    margin: 30px 0; /* モジュールクラスに付いていたものを移植 */
}
モジュールとレイアウトクラスをマルチクラスで使う
<button class="button buttonLayout">

状態

状態とは、 JavaScriptのクラス操作によって変化するモジュール、レイアウト 用のスタイルだ
サブモジュールと混同されやすいが

  1. モジュールとレイアウトクラスに付ける事が出来る
  2. JavaScriptで操作されるクラス限定

という点が大きく異なっている。
利用シーンとしては

  • ボタンの非活性を切り替える為の、.is-disabled クラス
  • アコーディオンメニューを開閉する為の、 is-open クラス

などがよくあるパターンだろう

テーマ

テーマとは、多言語対応やページ全体のトンマナを変更させるためのスタイルだ。
テーマに関しては、これはSMACSS公式でも明言していることだが、利用されるシーンはさほど多くはない、小規模程度のトンマナ変更であればサブモジュールで事足る場合が殆どだろう

使い方としては主に以下の2パターンとなる

  1. 元々あるクラス名を上書きするパターン
  2. theme- プレフィックスを付けてテーマ専用のクラスを作るパターン
    この方法はSMACSS曰く、より規模の大きなテーマを作成する場合にはtheme-プリフィックス
    を特定のテーマコンポーネントに対して利用することで、より多くの要素に対して簡単にテーマを定義することができる。と記述してある
「1.」の例(PDF30ページ引用)
/* module-name.css 内で定義 */
.mod {
    border: 1px solid;
}
/* theme.css 内で定義 */
.mod {
    border-color: blue;
}
「2.」の例(PDF30ページ引用)
/* theme.css 内で定義 */
.theme-border {
    border-color: purple;
}
.theme-background {
    background: linear-gradient( ... );
}

正直、テーマに関しては自分自身も利用したことが無いので深い考察などが出来ない、、、
なので公式のソースコードをそのまま引用させて貰った

Discussion