STOP CSS

!WARNING

このスライドには従来の慣行に反するアイデアが含まれており、一部の方の気分を害する恐れがあります。

CSSを書くのを止めたい方へ

APICSSのご紹介

APICSSとは

APICSSは、フレームワークというよりはスタイルガイドです。

インストール、またはダウンロードしなければならないライブラリは特に

ありません。APICSSはOOCSSをさらに普及させるための新手法であり、

増え続けるHTMLに対するCSSからの回答です。

CSSはなぜ敬遠されるのか？

ページが増える

☟

デザインが増える

☟

CSSが増える

☟

管理に苦労する

☟

破綻する

ページが増える

☟

デザインが増える

☟

CSSが増える

☟

管理に苦労する

☟

破綻する

☜ ここで食い止めたい

ページが増える

☟

デザインが増える

☟

CSSが増える

☟

管理に苦労する

☟

破綻する

☜ 欲を言えばここ

もうCSSを増やさない

How

BEM?

No

OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS

=

APICSSCSS meets API

滅多に修正されないAPIのような

CSSの記述法

10個のCSSをフィルターとして使い

OOCSSを実現

@import1. variables

2. fonts

3. normalize

4. elements

5. forms

6. icons

7. objects

8. components

9. containers

10. utilities

@import1. variables 変数

2. fonts ウェブフォント

3. normalize ノーマライズ

4. elements ミニリセット

5. forms フォーム

6. icons アイコン

7. objects マイクロクラス

8. components UIコンポーネント

9. containers ボックス

10. utilities その他

@import1. variables 変数

2. fonts ウェブフォント

3. normalize ノーマライズ

4. elements ミニリセット

5. forms フォーム

6. icons アイコン

7. objects マイクロクラス

8. components UIコンポーネント

9. containers ボックス

10. utilities その他

原則修正は不可

追記のみ可

@import1. variables 変数

2. fonts ウェブフォント

3. normalize ノーマライズ

4. elements ミニリセット

5. forms フォーム

6. icons アイコン

7. objects マイクロクラス

8. components UIコンポーネント

9. containers ボックス

10. utilities その他

11. uncommon 上記のフィルターをすり抜けたものはこちらに記述

原則修正は不可

追記のみ可

既出のクラスを最大限活用することで

CSS追記ゼロを目指す

なぜ実現されてこなかったか？

Bootstrapに見る失敗例

Bootstrapに見る失敗例

div class="alert alert-info"

Bootstrapに見る失敗例

div class="alert alert-info"

div class="alert alert-danger"

Bootstrapに見る失敗例

• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない

• Container（箱）とContents（文字）のスタイルを個別に呼び出せない

• クラス名にContext（意味）が含まれているため、別の用途には使いづらい

Bootstrapに見る失敗例

• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない

• Container（箱）とContents（文字）のスタイルを個別に呼び出せない

• クラス名にContext（意味）が含まれているため、別の用途には使いづらい

Bootstrapに見る失敗例

• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない

• Container（箱）とContents（文字）のスタイルを個別に呼び出せない

• クラス名にContext（意図）が含まれているため、別の用途に利用しづらい

Bootstrapに見る失敗例

• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない

• Container（箱）とContents（文字）のスタイルを個別に呼び出せない

• クラス名にContext（意図）が含まれているため、別の用途に利用しづらい

Bootstrapに見る失敗例

div class="alert alert-danger"

ここ

!WARNING 本題です

従来のアプローチ

div class="alert alert-danger"

APICSSのアプローチ

div class="roundedbox roundedbox-red padding-15px" span class="color-red"

Google先生は言いました…

Google先生は言いました…

Bad .color-red { color: red; }

Good .color-caution { color: red; }

‒ Webの教科書

“スタイルの中身が後で修正されることも考えて、

クラス名は意味的なものにしましょう”

‒ Webの教科書

“スタイルの中身が後で修正されることも考えて、

クラス名は意味的なものにしましょう”

‒ Webの教科書

“スタイルの中身が後で修正されることも考えて、

クラス名は意味的なものにしましょう”

Failed

CSS HTML

One Many

CSSの修正は影響範囲が大きいため、

悪影響が出ていないかを目視で確認するのが困難

ページが増える

☟

デザインが増える

☟

CSSが増える

☟

管理に苦労する

☟

破綻する

APICSSの場合

デザインの変更は、HTML側のクラスを操作する

修正前

div class="roundedbox roundedbox-red padding-15px" span class="color-red"

修正後

div class="roundedbox roundedbox-blue padding-15px" span class="color-red"

修正の結果を常に目視で確認できるので安心・安全

大量に変更したい場合は、HTML側を一括置換

Good .color-red { color: red; }

Bad .color-caution { color: red; }

‒ APICSS ルール

“将来どのような意図で利用されてもいいように、

クラス名は内容を表すように命名する”

‒ APICSS ルール

“将来どのような意図で利用されてもいいように、

クラス名は内容を表すように命名する”

‒ APICSS ルール

“将来どのような意図で利用されてもいいように、

クラス名は内容を表すように命名する”

It works

Good .color-red { color: $red; }

Good .color-yellow { color: $yellow; }

Good .color-lightblue { color: $lightblue; }

Good .font-monospace { font-family: $monospace; }

Good .font-serif { font-family: $serif; }

Good .font-sanserif { font-family: $san-serif; }

結果

CSSに追記する機会が劇的に減ります

APICSSCSS meets API

OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS

STOP CSS

《まとめ》APICSSとは

《まとめ》APICSSとは

• HTMLが増えていっても、CSSには極力触らなくて済むCSSの記述法

• 一度発行したクラスは原則修正不可

• 11のファイルに分散させて記述する

• クラスの命名には、意図ではなく内容を盛り込む

《補足》上手に使うコツ

《補足》上手に使うコツ

• デザインを細かく要素分解して、要素を自由に出し入れできるように実装する

• クラス名はSMACSS流に、関連するクラスごとに共通の接頭子を持たせて、衝突を防ぐ

• CSS側への画像の記述は、できる限り避ける

ありがとうございました

byodkm.com/apicss

Copyright 2013 @tomohiro_kasuga. All right reserved.