このサイトは、只今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

PythonでGUIアプリ開発「PyQt」を使った感想

Python

2019.07.18

「二段階認証?」という方も 5分で覚える パスワードレス WebAuthnのまとめ

JavaScript

2019.07.07

上級者向け JavaScript 問題集 「javascript-questions」日本語翻訳担当してます。

JavaScript

2019.06.22

Wordpress サイトで、長時間 500 Internal Server Error発生。解決した方法とは。

WordPress

2019.06.18

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US