対象者 ・CSS設計はむずかしいので「シンプルに」かつ「メンテナンス・拡張可能」なCSS設計をしたい!方 ・エンジニアらしく構造的なCSS設計をしたい!方 ・個人で最初はモックアップ程度に開発して ゆくゆくはチームで開発してもっと大きくしていきたい!方 この記事を読んでできること ・AtomicDesignとは何か理解できる ・AtomicDesignを取り入れたCSS設計 APB CSSについて理解ができる この記事の概略 ■AtomicDesignとは、デザイン設計方法の1つ ・ボタンやラベルなどWebページを構成する要素を5つのステージで構成・管理する Atoms(アトム) - 原子:それ以上分解できない要素(ボタン) Molecules(モルキュール) - 分子:原子同士を組み合わせた要素(フォームとボタンがついたもの) Organisms(オルガニズム) - 有機体:分子同士を組
![個人でのWeb開発にもオススメなAtomicDesignとAPB CSSの紹介 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbc1f0f7d57c0fbd7dc87d81bc07542c36a83eff/height=288;version=1;width=512/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fqiita-fb-2887e7b4aad86fd8c25cea84846f2236.png)