このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

web帳

記事詳細

2016.01.02

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

というわけで、

明けまして、おめでとうございます!

なんか、慌ただしく2016年を迎えてしまった次第です。。

今年はちょっとゆっくりしたいなと思いつつ、

2016年、今年もよろしくお願いいたします。mm

さてはて、早速本題の方ですが、webデザイン界隈で

最近、「マテリアル・デザイン」だの「アトミック・デザイン」など以前にも

増して色々と聞くようになってきたのを肌で感じる今日この頃でして、

デザイナーの方もそれらの思考を持ってデザインされるかと思います。

そもそも「アトミック・デザイン」ってなんぞやって方はこちらを、

Atomic Design

Atomic Design

http://bradfrost.com/blog/post/atomic-web-design/

スクリーンショット 2016-01-01 23.55.38

Atomic Designの特徴として、こちらの図であるように、

atomic-design

UIパーツを「ATOMS」(原子)と捉え、原子と原子の組み合わせ「MOLECULES」(分子)となり、

「ORGANISMS」「TEMPLATES」を経て、ページが出来るのですよ。

と、ざっくり言っちゃうとこんな感じです。

(ざっくり言いすぎました。。)

(詳しくはスライドorページを確認していただけると。)

http://www.slideshare.net/bradfrostweb/atomic-design

 

このAtomic Designの特徴を生かし、更に「OOCSS」「SMACSS」の良いところを抜粋して

考えられた CSSの新設計「APBCSS - Atomic Parts Base CSS -」で作成されてはいかがでしょうか。

APBCSS - Atomic Parts Base CSS -

CSSの設計や、組み方がよくわかんない。。

OOCSSやSMACCSやBEMと複雑でよくわかんない。。

等を思っている方は、ぜひ「APBCSS」をお勧めします。

APBCSS – Atomic Parts Base CSS –

APBCSS 公式ドキュメントページ

http://apbcss.com/

github

APBCSS

screen_shot_ogp

APBCSS 詳細

スクリーンショット 2016-01-02 1.00.52

Atomic Design + OOCSS + SMACSS =

Atomic Parts Base CSS (APB CSS)

・シンプル

・予測しやすい設計

・汎用性を持った

・再利用しやすい

・メンテナンスしやすい

・拡張性をもった

・インタラクティブに扱える

といった特徴を持っています。

ATOMS

atomic-design_atom

原子となるUIパーツをまずは定義しましょう。

ボタン

btn

アイコン

github

これらのパーツには、「margin」や「float」などレイアウトプロパティを一切持たないようにしましょう。

MOLECULES

atomic-design_molecules

原子パーツと原子パーツが結合した際に分子となり、

初めて「margin」や「float」などレイアウトプロパティが、発生します。

「アイコン」と「ボタン」

btn_icon

「アイコン」と「テキスト」

icon_text

CSS Class

パーツを構成するCSS classは大きく6種類

css_class_type

・Atomic:原子とするクラス名

・Moduleモジュールとするクラス名

・Skin装飾などのクラス名

・Numberナンバリングのクラス名

・State状態を表すクラス名

・Other上記に該当しないその他のクラス名

 

つまり、

「.icon.github」

原子とモジュール名でAtomic UIパーツが作成されます。

そのアイコンに黄色のバージョンがあるのなら「.yellow」を付与しましょう。

「.icon.github.yellow」

このアイコンがタップされた状態なら

「.icon.github.yellow.tapped」

と、状態クラスを付与しましょう。

といった考えですね。

SCSSディレクトリ

SCSSのディレクトリに関しては、大きく 「base」「pages」「parts」の3種類で区切ります。

スクリーンショット 2016-01-02 1.24.43

Baseディレクトリには、

mixinや、resetなどを行うscssファイルを格納。

スクリーンショット 2016-01-02 1.26.12

 

Partsディレクトリには、

Atomic UIパーツ、UIモジュールとなるstyleを格納。

スクリーンショット 2016-01-02 1.27.17

 

Page ディレクトリには、

さすがにpartsのみでページは作成できないので、

コントローラ名をIDとし、アクション名をclassとして名前空間を設け

ページ固有のレイアウトスタイルなどを設定していきましょう。

スクリーンショット 2016-01-02 1.29.07

 

と、常に原子と分子の考えを持ってCSSを作成していくことを推奨している

CSSアーキテクチャとなっております。

 

CSSの設計や、組み方がよくわかんない。。

OOCSSやSMACCSやBEMと複雑でよくわかんない。。

ここ変えると、何処に影響いくかわからない。。。

行き当たりばったりで作っていったらCSSが破綻した。。

などなどのお悩みをお持ちの方は是非、

「APBCSS - Atomic Parts Base CSS -」を

取り入れて設計してみてはいかがでしょうか。

ではでは。

http://www.slideshare.net/daisuketakayama75/apbcss-atomic-parts-base-css

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、港区六本木で活動中。

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。