個人でのWeb開発にもオススメなAtomicDesignとAPB CSSの紹介

  • 15
    いいね
  • 0
    コメント

対象者

・CSS設計はむずかしいので「シンプルに」かつ「メンテナンス・拡張可能」なCSS設計をしたい!方
・エンジニアらしく構造的なCSS設計をしたい!方
・個人で最初はモックアップ程度に開発して
ゆくゆくはチームで開発してもっと大きくしていきたい!方

この記事を読んでできること

・AtomicDesignとは何か理解できる
・AtomicDesignを取り入れたCSS設計 APB CSSについて理解ができる

この記事の概略

■AtomicDesignとは、デザイン設計方法の1つ

・ボタンやラベルなどWebページを構成する要素を5つのステージで構成・管理する

Atoms(アトム) - 原子:それ以上分解できない要素(ボタン)

Molecules(モルキュール) - 分子:原子同士を組み合わせた要素(フォームとボタンがついたもの)

Organisms(オルガニズム) - 有機体:分子同士を組み合わせた要素(ナビゲーションメニューやヘッダー)

Templates(テンプレート) - テンプレート:有機体を組み合わせた要素(ナビゲーション、ヘッダー、コンテンツ、サイドメニュー、フッター)

Pages(ページ) - ページ:テンプレートに具体的な画像、文字を入れたもの

■APB CSSとは AtomicDesignを取り入れたCSS設計

・AtomicDesignが採用しているそれ以上分解できない構成要素をAtomic Partsとして
定義していくCSSアーキテクチャ(構造)

・OOCSS + SMACSS を取り入れた、マルチクラスを採用

・以下の6つのクラスタイプで構成・管理する

Atomic:原子パーツ名となるクラス名
Module:UI を包括するモジュール名となるクラス名
Skin:装飾などのクラス名
Number:ナンバリング用のクラス名
State:状態を表すクラス名
Other:その他のクラス名。パーツのセマンティックネームもここに含む。

具体的な内容は、「APB CSSとは -6つのクラスタイプで構成・管理する-」に記載

AtomicDesignとは

AtomicDesignとは -デザイン設計方法の1つ-

book-cover-thumb.png

Webページのデザインを考える際の設計方法の1つです。
ボタンやラベルやアイコンやフォーム等を
Webページを構成する要素の1つとして定義して考えます。

ad_qiita_ex_page01.png

Qiitaのページを例にあげると上のようにボタンやロゴやアイコン等色々な要素から構成されていることがわかります。

こうした要素ごとに5つのステージで
仲間分けにして構成・管理するのがAtomicDesignです。

AtomicDesignとは -5つのステージで構成・管理する-

AtomicDesign(原子のデザイン)という名前が冠するように
設計方法の大きな特徴として、ボタンやロゴやアイコンなどそれ以上分解できない要素を
物理学でよく聞く原子として考え、そこから色々な要素を組み合わせてページを作っていく考えを採用しています。

一番小さい原子から、原子同士があつまって分子になったり
組み合わせいくごとに構成要素ごとのステージが変わっていきます。

それぞれのステージと対応する要素の例は、以下の通りです。

Atoms(アトム) - 原子

パーツとしてそれ以上分解できないもの
要素例:ボタン ロゴ アイコン フォーム ラベル

ad_qiita_ex_page_parts_a.png

Molecules(モルキュール) - 分子

原子同士を組み合わせたもの
要素例:フォームとボタンがついたもの
アイコンとテキストがついたもの

ad_qiita_ex_page_parts_m.png

Organisms(オルガニズム) - 有機体

分子同士を組み合わせたもの
要素例:ナビゲーションメニューやヘッダー

ad_qiita_ex_page_parts_o.png

Templates(テンプレート) - テンプレート
有機体を組み合わせたもの
要素例:ナビゲーション、ヘッダー、コンテンツ、サイドメニュー、フッターがついたもの
ad_qiita_ex_page_parts_t.png

Pages(ページ) - ページ
テンプレートに該当する画像やテキスト情報等具体的な内容をいれたもの
要素例:なし

原子から、原子を組み合わせて分子に、分子を組み合わせて有機体になっていくという感じです。

それぞれをさきほどのQiitaのページの要素と対応させてつくっていくとこんな感じです。

ad_qiita_ex_page02.png

それでは、これを具体的にCSS設計に落とし込んだ、
APB CSSについて次にご説明します

APB CSS(ATOMIC PARTS BASE CSS)とは

APBCSS.png

AtomicDesignが採用しているそれ以上分解できない構成要素をAtomic Partsとして
定義していくCSSアーキテクチャ(構造)です。

CSSのクラスには、 OOCSS + SMACSS を取り入れた、マルチクラスを採用しています。
例:青い色のボタンを作りたい時に btn btn-blueとボタンのクラスとボタンの色を青くするクラスをつけていく感じ

APB CSSとは -6つのクラスタイプで構成・管理する-

クラスタイプは、以下の6つで仲間分けされています。

apbcss_qiita_ex_page_css_class_type.png

Atomic:原子パーツ名となるクラス名
Module:UI を包括するモジュール名となるクラス名
Skin:装飾などのクラス名
Number:ナンバリング用のクラス名
State:状態を表すクラス名
Other:その他のクラス名。パーツのセマンティックネームもここに含む。

命名規則は、icon ◯◯icon icon◯◯ ◯◯-icon icon-◯◯・・という感じが原則的です。

Atomic:原子パーツ名となるクラス名
- text
- icon
- btn
- thumbnail
- label
- input
- code
- separate

Module:UI を包括するモジュール名となるクラス名
- header
- footer
- contents
- mainLogo
- title
- column
- thumbnailList
- textList
- detailBox
- modalWindow

Skin:装飾などのクラス名
- red
- blue
- wide
- high
- low
- stripe
- subdued
- small
- middle

Number:ナンバリング用のクラス名

  • one
  • two
  • no[nth]
  • type[nth]
  • first
  • last
  • odd
  • even

State:状態を表すクラス名

  • active
  • disable
  • tapped
  • success
  • error
  • highlight
  • checked
  • note
  • center
  • right

Other:その他のクラス名。パーツのセマンティックネームもここに含む。

  • wrap
  • Service name
  • Page name
  • Controller name
  • Namespace

参考ページ

AtomicDesign
https://www.indetail.co.jp/blog/10234/

http://design.dena.com/design/atomic-design-%E3%82%92%E5%88%86%E3%81%8B%E3%81%A3%E3%81%9F%E3%81%A4%E3%82%82%E3%82%8A%E3%81%AB%E3%81%AA%E3%82%8B/

APBCSS

http://apbcss.com/