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

web帳

記事詳細

2016.03.28

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

「CSSが難しい。。」「CSSが面倒。。」

OOCSSBEMSMACSS

Layout、Component、module….

「色々ありすぎてわかんねーよ!」「サクッと作れないよ。」「ルールが分かりづらい。。」

などなど、お困りのエンジニアさんにもオススメのCSSアーキテクチャが、

APBCSS となります!

APBCSS

http://apbcss.com/

スクリーンショット 2016-03-27 1.26.41

 

APBCSS は Atomic Parts Base CSSの略で「エーピービーシーエスエス」と呼びます。

その名の通り、Atomic Designが ベースとなるように設計されたCSSアーキテクチャの一つとなります。

Atomic Design

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

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

新しく登場した「CSSアーキテクチャ」という事で、まだまだ認知度は低いのですが、「OOCSS」「SMACSS」「BEM」等と並んで、派生のCSSアーキテクチャとして、徐々に広がっている様子ですね。

スクリーンショット 2016-03-27 2.12.07

自分も、業務では「OOCSS」「SMACSS」の設計などで組んでいたりして、「APBCSS」より良い点を探そうとしていたりしますが、やはりなんといっても「APBCSS」が扱い易く、CSSを減らせるアーキテクチャですね。

容易に新規ページの作成も行えるし、

むしろ「CSSに慣れていないエンジニアさん」にもオススメなCSSアーキテクチャではないでしょうか。

APBCSS(Atomic Parts Base CSS)の特徴

APBCSSの 特徴としましては、多くのCSSアーキテクチャでも用いられている、Layoutといった概念はなく、構成の考え方もその逆で、細部化出来ないUIパーツから、定義していくアーキテクチャとなっております。

Atomic Designが、ベースとなっているCSSアーキテクチャの一つでしょう。

 

「細部化出来ないUIパーツ」Atomic Partsとして振る舞い、Atomic PartsAtomic Partsが組み合わさった際に、そのパーツは「Molecules」(分子)として(変化)振る舞われます。

atomic-design_molecules

また、それらの、Atomic Parts Molecules Partsは、「Module」によって包括されます。

m001

Atomic Parts Molecules Partsが包括された「Module」 を更に「Module」 によって包括していき

ページは作成されると言った考えです。

atomic-design

Atomic Parts 自身は、margin、position、float 等、Layoutを定義するStyleは一切含めず「Molecules」(分子)として変化した際に、初めて親要素以外の要素に対してstyleを適応することが出来ます。

また、包括する「Module」の要素にもLayoutを定義するStyleを含められます。

 

つまり、こういう事ですね。

公式ページには、「ボタン」「アイコン」を使った例があります。

Atomic Partsである「ボタン」cssクラスは.btn .primary」

btn

css class typeは「AtomicとNumber」で作成されている。

もう一つはAtomic Partsである「アイコン」cssクラスは.icon .social .github

github

CSS class typeは「AtomicとOther(サービスネーム)」で作成されている。

どちらもLayoutのStyleは含めない。

 

これが合体すると、Molecules(分子)となり、初めてアイコンに対してLayout Styleが発生する事になる。

btn_icon

では、包括する「Module」では、

この様なデザインがあるとすると、

apb001

.textBoxのみ「Module」で、それ以外Atomic Parts というのがわかる。

この時 Layout Styleが発生するのが「ボタンとアイコン」のMolecules(分子)に対してと

「.textBoxからの各パーツに対して」のLayout Styleというのがわかる。

.textBox {
    .text {
        Layout Style..
    }
    .btn {
        Layout Style..
    }
}

apb001_2

もう一つ、サムネイルを含んだ「.thumbnailBox」を見てみると、新しくサムネイルがAtomic Partsとして追加されたのがわかる。

apb002

.textBox {
    .thumbnail {
        Layout Style..
    }
    .text {
        Layout Style..
    }
    .btn {
        Layout Style..
    }
}

Atomic Partsが、各「Module」に入った時にLayout Styleで位置調整されているのがわかる。

では、2つを比較すると、

apb003

Atomic Partsは、共通でstyleを定義しているので、異なるのはそれぞれ「Module」に含まれた時のLayout Styleというのが分かる。

つまり、無駄なCSSを記述せず、最小限にレイアウトを組めるのがわかりますね。

なんだ、これ。最高ではないか?

 

「.thumbnailBox」に入っているボタンは色が異なるんだよねー。っていう時も、「.thumbnailBox」から指定するのではなく、それは「Atomic Parts」の.btn が背負うstyleなので、きちんと「Atomic Parts」の方に指定を行いましょう。

といったポリシー。

apb004

こうする事で、汎用性、保守性高まっていくかと思います。

要するに「Atomic Parts」「Molecules」の関係性に重点を置き、ページを作成していく。

その他のcss classは補助的に扱いましょう。

といった感じでしょうか。

pic_css_class_type_001

とりあえず、パーツを置けば表示して、あとはLayout Styleでレイアウトを調整すれば良い。

といった感じに、至ってシンプルな設計な上、汎用性のあるCSSアーキテクチャとなっております。

必ず、「Molecules」に入れないとLayout Style が適応しない。って訳でも無く、

「ボタンを右寄せにしたい。」

といった時も、「Atomic Parts」のボタンに対して、CSS Class Typeの「State」を付与classとして適応すればいいので、

state

.btn.primary.right

btn_icon_right

超簡単ですね。

公式ページでは、その他ページによってレイアウトが異なる事も考慮して、ネームスペースの確保やSCSSファイル管理の方法なども推奨しております。

APBCSS

http://apbcss.com/

単純ですが、保守性も高くて良いですね。

今までのCSSアーキテクチャと若干異なる、「細部化出来ないUIパーツ」Atomic Partsとして振る舞うAPBCSSを取り入れてみてはいかがでしょうか。

ではではー。

 

  • RSSを登録する

  • follow us in feedly

Graphical FrontEnd Engineer
- Daisuke Takayama

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

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