Post on 21-Dec-2014
description
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.