BETA

【備忘録】APBCSSについて

投稿日:2020-05-01
最終更新:2020-05-11

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

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

自分の備忘録として殴り書く!!

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう