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

Archives Details

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

CSS3

2016.03.28

この記事は最終更新日から1年以上が経過しています。

「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を取り入れてみてはいかがでしょうか。

ではではー。

 

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

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

2016.03.28

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

2016.01.02

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

安い!軽い!早い! ノートPC(開発環境)。 Chromebookをついに購入いたしました!

Chromebook

2018.07.22

debian & Xserver XDSLで FireFoxが真っ白のページとなる件

Linux

2018.07.08

Kindle Fire HD 8 にLinuxを導入して扱えるようにする。超コスパ Linux タブレット構築方法!!

Linux

2018.07.04

Laravel 4 を PHP 7 環境へ移行したお話。

PHP

2018.06.10

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US