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

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

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

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

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

<!-- 【Atomic Parts】icon -->
<i class="icon social twitter"></i>
```
クラス名が複数ついているのは、下記みたいな意味と認識。
* 原子クラス（ベースとなるスタイルが定義される）
* モジュールクラス（ベース以外のスタイルが定義される。これが変わることでベースは一緒でも見た目が変わる）

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

```scss
/* [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`にはつかないよってこと。

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

```

```scss
/* [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なの？？？え？？？？？」ってなって。。。。
コード見ても理解するまでに結構な時間を要しました(ヽ´ω`)
これ、命名規則は何かしらちゃんと定義しとかないと、混乱しちゃうかなーってのが個人的感想です。

## 参考にさせていただいたサイトたち

- [APB CSS公式ドキュメント](http://apbcss.com/)
- [APB CSS（GitHub）](https://github.com/webcyou/apbcss)
- [2016年は「AtomicDesign」を取り入れた「APB CSS（Atomic Parts Base CSS）」で迷わず、簡単、拡張性持った CSS設計を！](http://www.webcyou.com/?p=6471)