triBlog

トリアナのブログ。

【vol.2】有名な3つのCSS設計をまとめてみた〜SMACSS編〜

2019.8.1
車もバスも特急列車も酔います
ライター画像
おくだ

こにゃにゃちわ~(古い)(ケロちゃん)(伝われ)

カードキャプターさくら世代の奥田です!
(よく調べたら私は再放送世代でした…!)

前回のOOCSS編に引き続き、今回はSMACSS編です(⌒▽⌒)

CSSを快適に書くためのリーダブルでナウでヤングなCSS設計の世界へ!

レッツゴー!!!

CSS設計とは(おさらい)

CSS設計はCSSを快適にするためのルールです。

誰が見ても分かりやすく、変更にも対応しやすい。そして何より書きやすいCSSになります。

有名な設計としてOOCSS、SMACSS、BEMがあります。

SMACSSとは

SMACSSはOOCSSの流れを汲んで提唱された設計思想です。
OOCSSと同じマルチクラスで基本的な考え方は一緒です。
読み方はスマックス。エスエムエーシーエスエスではなくて安心しました。

特徴

カテゴライズ

CSSを5つのカテゴリに分けるのが大きな特徴。
大量のCSSを体系的にまとめることで、メンテナンスが楽になります。

「inputのスタイルってどこで指定したっけ…。」

と、CSSファイルで迷子になる人には特にオススメです。
(以前は私もそうでした)

SMACSSのカテゴリ分けを覚えて、探しているスタイルをすぐに見つけましょう。

– Base
一度定義したら書き換えることがない場所です。
たとえばhtml要素やbody要素に適用するfont-familyや、aタグに適用するcolor、borderなどがあります。
ここにreset.cssなどの中身を入れる人もいます。

– Layout
ヘッダー・フッター・メイン・サイドバーなどの大枠のスタイルを入れます。
ほかにも、グリッドなどの比較的大きなレイアウトはこっちに入ります。小さいものはあとで出てくるモジュールカテゴリへ。

– Module
ほとんどのスタイルが入ります。
モジュールという名の通り、部品が入ります。
ボタンやリンクなどの再利用を前提とした部品です。
基本的に他のカテゴリに入らないものはすべてここに入れると思って大丈夫です。

– State
状態を表すスタイルが入ります。
静的なページではあまり使わないかもしれませんが、
フォームにエラーを出す時にinputタグの枠を赤くするなどの「状態の変化」を表すスタイルを記述します。
あとはdisplay: none;する時とか。

– Theme
ダークモードなど、サイト全体のテーマをガラッと変えるときのCSSが入ります。
html要素やbody要素にクラスをつけて、background-colorやcolorを変更します。

「そんなん言われてもイマイチ想像できない」と思っているそこのあなた。

ざっくり示すとこんな感じです。

コメントアウトなどでカテゴリに区切りを示します。

ステートカテゴリだけは、その状態を表しているスタイルの直下に置くことが推奨されています。
関連するものは近くにある方が分かりやすいですからね。

命名規則

「1ページに1度しか出てこないレイアウト」に対してはIDセレクタが容認されています。
メインやサイドバー、ヘッダーやフッターなどですね。

また、レイアウトカテゴリやステートカテゴリなどに属するクラスは、
接頭辞をつけることが推奨されています。(「.l-sidebar」「.is-label-error」など)
レイアウトのl、ステートの…なぜかisです。
状態を表すので、「~ is error」的な感じなんですかね。
ステートカテゴリのクラス名は.is-label-error、is-button-submitなど、くっつける部品の名前を入れます。
これは.is-errorや.is-submitなどと命名すると、他に定義されている.is-errorや.is-submitを汚染してしまう可能性があるからです。

「同じクラス名を使ったせいで、思わぬところのスタイルが崩れちゃった…。」

っていう悲劇にはもうさようなら。

SMACSSまとめ

SMACSSではIDセレクタを容認していますが、プロパティの詳細度の観点から賛否両論あります。
しかし、カテゴライズに関してはCSSファイル内での区切りとして非常に有効ではないでしょうか。

個人的にはOOCSSとセットでSMACSSのカテゴリ分けを使ってます。
CSSファイル全体がスッキリ!

次回はBEM編です!お楽しみに(⌒▽⌒)

記事を書いた人

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ライター画像
おくだ インターン

UIとインタラクティブ表現に強いフロントエンドエンジニアを目指してます。自称トリアナの新しい風。

ページ上部へ