Motomichi Works Blog

モトミチワークスブログです。その日学習したことについて書いている日記みたいなものです。

WebデザインからCSS設計について考える その0003 SMACSSの必要部分について学ぶ

制作 design css設計

参考にさせて頂いたページ

SMACSS

Home - Scalable and Modular Architecture for CSS

前提として知っておく知識

以前の記事で、デザインを作成したり、CSS書いたりする際に参考にさせて頂いたサイトURLをまとめました。

WebデザインからCSS設計について考える その0001 前提知識みたいなもののリンクをまとめた - MOTOMICHI WORKS BLOG

前に見てたサイトどれだっけなー。ってなると困っちゃうので。

はじめに

今回、SMACSSの中で個人的に必要としている部分だけ学ぶということであって、これがSMACSSの全てというわけではありません。

SMACSSについての抜粋

SMACSSのカテゴリ分類

以下の5つのカテゴリがあります。

  • ベース
  • レイアウト
  • モジュール
  • ステート (状態)
  • テーマ

各カテゴリについて掘り下げ

ベース

reset.css、normalize.css、sanitize.cssみたいなものだと捉えてます。

要素に直にスタイルを指定するので接頭辞はありません。

レイアウト

接頭辞はl-またはlayout-とSMACSSのドキュメントに書いてあります。

モジュールを並べる為の枠です。

モジュール

モジュール名

SMACSSではモジュールの一番外側になる要素には module- という接頭辞を付けたりすると冗長であるとし、モジュール名をそのまま付けます。

例えばナビゲーションのCSSならば以下のように書くようです。

.nav{}/* 冗長なので .module-nav という命名はしない */
.nav .ul-ol-elm{}
.nav .li-elm{}
.nav .anc-elm{}

上記のCSSに対応するHTMLは以下のようになります。

<div class="nav">
  <ul class="ul-ol-elm">
    <li class="li-elm">
      <a class="anc-elm" href="#">hoge</a>
    </li>
    <li class="li-elm">
      <a class="anc-elm" href="#">foo</a>
    </li>
  </ul>
</div>

一番親の要素につけるクラスがモジュール名です。
この例では.navです。

この例で子要素のクラスである、
.ul-ol-elm
.li-elm
.anc-elm
は全て、.navの中にあるときしかスタイルが適用されません。

このように、モジュール名のクラス.navだけがスコープの無いグローバルなクラスになります。

サブクラス名

サブクラス名は、モジュールクラス名と一緒に付与することで、「サブモジュール」を作ります。
サブクラスの命名規則は接頭辞としてモジュール名-が付きます。
ここまで書いてきたナビゲーションの例でいうとnav-です。

上記したナビゲーションのCSSではプロパティを何も指定していないので、li要素はdisplay:blockが初期値です。 navのサブモジュールを定義する為に、例えば二行追記して、以下のようにします。

.nav{}
.nav .ul-ol-elm{}
.nav .li-elm{}
.nav .anc-elm{}

.nav.nav-inline{}
.nav.nav-inline .li-elm{display:inline;}

二行追記された上記のCSSに対応するHTMLは以下のようになります。

<div class="nav nav-inline">
  <ul class="ul-ol-elm">
    <li class="li-elm">
      <a class="anc-elm" href="#">hoge</a>
    </li>
    <li class="li-elm">
      <a class="anc-elm" href="#">foo</a>
    </li>
  </ul>
</div>

この例ではモジュールの一番外側にあたるdiv要素にnavとnav-inlineを付けることで、サブモジュールを定義しています。

さらなるサブモジュールを定義するには、例えば二行追記して、以下のようにします。

.nav{}
.nav .ul-ol-elm{}
.nav .li-elm{}
.nav .anc-elm{}

.nav.nav-inline{}
.nav.nav-inline .li-elm{display:inline;}

.nav.nav-inline-block{}
.nav.nav-inline-block .li-elm{display:inline-block;}
ついでに

もしかすると「サブクラスで色を変える」という例の方がイメージしやすいかもしれません。

Bootstrapのボタンの例も書いておきます。

ボタン ≪ CSS ≪ Bootstrap3日本語リファレンス

上記のページにあるように

<button class="btn btn-default">button要素</button>

や

<button class="btn btn-primary">button要素</button>

として、

btnというクラスとbtn-primaryというクラスを組み合わせて色の違うボタンを表現しています。

ステート (状態)

接頭辞はis-です。

下記の二つはCSSの適用の仕方として、「モジュールクラスと組み合わせたときに適用されるスタイル」という点で似ています。

  • ステートクラスis-による状態定義
  • サブクラスによるサブモジュールの定義

上記した二つが決定的に異なる点として、

  • is-はレイアウトにもモジュールにも組み合わせて良い
  • is-はページが描画された後で、JavaScriptによって外したり付けたりするクラス

という二点がSMACSSのドキュメントで挙げられています。

それに対して、サブクラスはページ描画がされたときに始めから付いていて、jsで外したり付けたりしないクラスです。

テーマ

接頭辞はtheme-です。

ドキュメントの中で以下のような説明がされています。

  • サイトが持つルック＆フィールを定義するもの
  • テーマは全てのルールに対して影響を及ぼすもの
  • テーマはユーザに対して表面的なデザイン変更を提供したい場合に使用される
  • サイト内で別セクションでは別の色を使いたい場合やユーザ自身が色を変更したい場合、または言語や国によって異なるテーマを設定したい場合などがある。

bodyであったり、そのひとつ内側に配置した要素にidやclassを付けることによるCSSシグネチャをする役割を持つようです。

個人的な印象としては、CSS設計上これを必要とするサービスはあまり多くない気がしています。

SMACSSに無い接頭辞

スタイルを適用するクラスではないため、SMACSSとは関係ないのですが、HTML要素に付与するクラスには役割ごとに接頭辞を付けておくと管理が楽な気がします。

JavaScriptでgetElementする為のクラスやid

js-という接頭辞を付ける人も少なくないかと思います。

特にjQueryなどでイベントトリガーになる要素や、DOM操作の対象となる要素に付けたりします。

デザインと振る舞いとを分けることができたり、前任者から引き継いだHTMLソースコードについて、理解しやすかったりします。

HTML要素に付けるクラスが多くなり、冗長にはなりますが長い目でみると運用チームとして有益な気がします。

チェックボックスやラジオボタンで、label要素に対応したidを付与するときに、label-などの接頭辞を付けるのも良いかと思います。

今回のまとめ

SMACSSのカテゴリ

SMACSSではCSSは以下の5つのカテゴリに分かれています。

  • ベース(要素そのものに設定するので接頭辞は無し)
  • レイアウト
  • モジュール(SMACSSにおいて接頭辞の付かないクラスは全てモジュール)
  • ステート (状態)
  • テーマ

SMACSSの接頭辞

SMACSSにおける接頭辞は以下の3種類です。それ意外のクラスは全てモジュールです。

  • l-
  • is-
  • theme-

モジュールの命名規則

  • 一番親となる要素に付与するモジュールクラス名(接頭辞は無しで、今回の例ではnav)
  • 子クラスは親クラスの中でしかスタイル適用されない(今回の例では.nav .ul-ol-elm{}みたいに半角スペースで区切っている)
  • サブクラス名は、モジュール名を接頭辞として命名(今回の例ではnav-inline)

メリット

SMACSSでは影響範囲の大きいグローバルなクラスを極力作らないことで、CSSの編集による影響範囲を明示し把握しやすくすることで、安心してCSSを編集できる。

次回のこと

次回はBEMについて少し学んで考えます。