Atomic Designとは
要素をパーツやコンポーネント単位で分割して、定義するUIデザイン、設計手法のことです。
分割する単位
Atomic Designでは分割する単位は下記のように定義されています。
atoms 原子 (Lv1)
アイコンや配色、フォント、ボタン、テキストエリアなど、
これ以上分割できないもの。
h1
text
color
label
input text
icon
button
molecules 分子(Lv2)
atomを2つ以上のを組み合わせたもの。
buttonとicon
labelとinput text
organisms 生体(Lv3)
atomsやmoleculesを組み合わせたもの。
汎用的に使用できるように組み合わせたorganismsにはmarginなどは指定しません。
atomsやmoleculesにスタイルを指定することはあります。
templates テンプレート(Lv4)
organismsを組み合わせたもの。
レイアウトやorganismsの横幅、スペースなどを指定します。
pages ページ(Lv5)
取得したデータを反映したり、ページ固有の情報をtemplateを渡すもの。
また、ページ固有のスタイルなどもこちらで指定します。
以上、僕のAtomic Designに関する解釈でした。
明確な答えがあるものではないと思っているのですが、
こうした方がいいのでは？？
自分はこうやって使っているなどあればお教えいただけますと幸いです。