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