【自分備忘録】APBCSSについて #CSS設計

APB CSSとは

Atomic Parts Base CSSの略。
アトミックデザイン＋OOCSS＋SMACSSが合わさったもの。
CSS設計のひとつ。

考え方

これ以上細分化できないパーツから定義していく（Atomic Parts）
Atomic Partsが集まって、Molecules Parts（分子パーツ）が構成される。
Atomic PartsやMolecules PartsがModuleによって包括され、どんどん大きなパーツ（ページ）が構成される。

Atomic Parts

プロジェクト内でこれ以上細分化できないものをAtomic Partsとして定義する。

<!-- 【Atomic Parts】btn -->
<div class="btn primary">
    <a href="#">Button</a>
</div>

<!-- 【Atomic Parts】icon -->
<i class="icon social twitter"></i>

クラス名が複数ついているのは、下記みたいな意味と認識。
* 原子クラス（ベースとなるスタイルが定義される）
* モジュールクラス（ベース以外のスタイルが定義される。これが変わることでベースは一緒でも見た目が変わる）

んで、原子クラスには、marginとかpaddingとかのレイアウトスタイルは定義しない。

/* [Atomic Parts] btn */
.btn {
    position: relative;
    width: 200px;
    height: 40px;
    a {
        display: block;
        color: #ffffff;
        line-height: 40px;
    }
    &.primary {
        background-color: #333333;
        &:hover {
            background: #666666;
        }
    }
}

/* [Atomic Parts] icon */
.icon {
    display: inline-block;
    &.social {
        width: 30px;
        height: 30px;
        background-size: 250px auto;
        &.twitter {
            background: url(/img/sprite.png) no-repeat;
            background-position: -171px top;
        }
    }
}

Molecules Parts

Atomic PartsとAtomic Partsが合体したときに、Molecules Parts（分子パーツ）に変化する。
上記で挙げたボタンとアイコンを合体させると、そこで初めてmarginやpositionなどのレイアウトスタイルが定義される。
ちなみに、レイアウトスタイルが発生するのは、子要素になるもの。
上記でいうと、.iconにmarginがつくが、.btnにはつかないよってこと。

<!-- 【Molecules Parts】btn + icon -->
<div class="btn primary">
    <a href="#"><i class="icon social twitter"></i>Button</a>
</div>

/* [Molecules Parts] btn + icon */
.btn {
    .icon {
        &.social {
            margin-right: 10px;
        }
    }
}

クラスの種類

APBCSSは、OOCSSとSMACSSがベースになっていて、マルチクラスで使用する。
クラスの種類は全部で6種類。

Atomic（原子クラス）
Module（モジュールクラス）
Skin（装飾クラス）
Number（ナンバリングクラス）
State（状態クラス）
Other（上記に定義されない、もしくは定義するほどのこともない小さなクラス。）

ベースにAtomicとModuleが、それに付与される形でSkin、Number、State、Otherが使用される。

Atomic

ボタンとかアイコンとかテキストとか。
SMACSSでいうModuleなんだけど、これ以上細分化できないパーツっていう条件がつくイメージ。

Module

1つのコンポーネントになるもの。
ヘッダー、フッター、カード、メインコンテンツ、タイトル、サムネイル一覧、モーダルなど。
SMACSSでいうLayoutやModuleがこれに含まれるイメージ。

Skin

Skinクラスが付与されることで、色が変わったり高さが変わったりする。
AtomicやModuleに色や高さのスタイルがつけられないわけではないから、原子クラス・モジュールクラスの色違いや大きさ違い用に付与するクラス…と考えてる。

Number

これは、あるモジュールのX番目とか、偶数番目、奇数番目とかに付与するためのクラス。

State

状態変化のクラス。
タブのアクティブ時とかエラー時とか…JS制御とかで変化するもの。

Other

各ページ固有のクラス（ネームスペース）とかサービス名とか上記に該当しないクラス。

ディレクトリ構成

SCSSのディレクトリ構成は、下記が推奨されている。

 scss
  ├─ base
  │    ├─ _base.scss（ベース）
  │    ├─ _reset.scss（リセット系）
  │    ├─ _mixin.scss
  │    └─ _setting.scss（変数など）
  ├─ pages
  │    ├─ _top.scss
  │    └─ _article.scss
  ├─ parts（atomとmodule置き場）
  │    ├─ _button.scss
  │    ├─ _text.scss
  │    ├─ _list.scss
  │    └─ _header.scss
  ├─ _common_inc.scss（baseとpagesをインポート）
  ├─ _parts.scss（partsをインポート）
  └─ style.scss（_common_inc.scssと_parts.scssをインポート）

pages

各ページ固有のスタイルを記述。
原子パーツにするほどのものではない、ページ固有のパーツもここに記述する。

parts

パーツごとにファイルを分け、そこに記述していく。
AtomicとModuleあたりが入る感じ。

勉強しててちょっと思ったこと

クラスの命名規則についてが、ちょっと気になりました。
基本的に「これ推奨です！」みたいな命名規則はない感じ。
公式サイトに載っていたのは、あくまで例だとは思うけど、ドキュメント読んでたときに「え？どれがmoduleに分類されるやつ？どれがskinなの？？？え？？？？？」ってなって。。。。
コード見ても理解するまでに結構な時間を要しました(ヽ´ω`)
これ、命名規則は何かしらちゃんと定義しとかないと、混乱しちゃうかなーってのが個人的感想です。

【自分備忘録】APBCSSについて