stop css - apicss(日本語版)
DESCRIPTION
APICSSは、フレームワークというよりはスタイルガイドです。インストール、またはダウンロードしなければならないライブラリは特にありません。APICSSはOOCSSをさらに普及させるための新手法であり、 増え続けるHTMLに対するCSSからの回答です。TRANSCRIPT
![Page 1: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/1.jpg)
STOP CSS
![Page 2: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/2.jpg)
!WARNING
このスライドには従来の慣行に反するアイデアが含まれており、一部の方の気分を害する恐れがあります。
![Page 3: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/3.jpg)
CSSを書くのを止めたい方へ
![Page 4: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/4.jpg)
APICSSのご紹介
![Page 5: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/5.jpg)
APICSSとは
APICSSは、フレームワークというよりはスタイルガイドです。
インストール、またはダウンロードしなければならないライブラリは特に
ありません。APICSSはOOCSSをさらに普及させるための新手法であり、
増え続けるHTMLに対するCSSからの回答です。
![Page 6: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/6.jpg)
CSSはなぜ敬遠されるのか?
![Page 7: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/7.jpg)
ページが増える
☟
デザインが増える
☟
CSSが増える
☟
管理に苦労する
☟
破綻する
![Page 8: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/8.jpg)
ページが増える
☟
デザインが増える
☟
CSSが増える
☟
管理に苦労する
☟
破綻する
☜ ここで食い止めたい
![Page 9: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/9.jpg)
ページが増える
☟
デザインが増える
☟
CSSが増える
☟
管理に苦労する
☟
破綻する
☜ 欲を言えばここ
![Page 10: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/10.jpg)
もうCSSを増やさない
![Page 11: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/11.jpg)
How
![Page 12: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/12.jpg)
BEM?
![Page 13: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/13.jpg)
No
![Page 14: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/14.jpg)
OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS
![Page 15: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/15.jpg)
=
![Page 16: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/16.jpg)
APICSSCSS meets API
![Page 17: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/17.jpg)
滅多に修正されないAPIのような
CSSの記述法
![Page 18: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/18.jpg)
10個のCSSをフィルターとして使い
OOCSSを実現
![Page 19: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/19.jpg)
@import1. variables
2. fonts
3. normalize
4. elements
5. forms
6. icons
7. objects
8. components
9. containers
10. utilities
![Page 20: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/20.jpg)
@import1. variables 変数
2. fonts ウェブフォント
3. normalize ノーマライズ
4. elements ミニリセット
5. forms フォーム
6. icons アイコン
7. objects マイクロクラス
8. components UIコンポーネント
9. containers ボックス
10. utilities その他
![Page 21: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/21.jpg)
@import1. variables 変数
2. fonts ウェブフォント
3. normalize ノーマライズ
4. elements ミニリセット
5. forms フォーム
6. icons アイコン
7. objects マイクロクラス
8. components UIコンポーネント
9. containers ボックス
10. utilities その他
原則修正は不可
追記のみ可
![Page 22: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/22.jpg)
@import1. variables 変数
2. fonts ウェブフォント
3. normalize ノーマライズ
4. elements ミニリセット
5. forms フォーム
6. icons アイコン
7. objects マイクロクラス
8. components UIコンポーネント
9. containers ボックス
10. utilities その他
11. uncommon 上記のフィルターをすり抜けたものはこちらに記述
原則修正は不可
追記のみ可
![Page 23: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/23.jpg)
既出のクラスを最大限活用することで
CSS追記ゼロを目指す
![Page 24: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/24.jpg)
なぜ実現されてこなかったか?
![Page 25: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/25.jpg)
Bootstrapに見る失敗例
![Page 26: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/26.jpg)
Bootstrapに見る失敗例
div class="alert alert-info"
![Page 27: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/27.jpg)
Bootstrapに見る失敗例
div class="alert alert-info"
div class="alert alert-danger"
![Page 28: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/28.jpg)
Bootstrapに見る失敗例
• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない
• Container(箱)とContents(文字)のスタイルを個別に呼び出せない
• クラス名にContext(意味)が含まれているため、別の用途には使いづらい
![Page 29: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/29.jpg)
Bootstrapに見る失敗例
• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない
• Container(箱)とContents(文字)のスタイルを個別に呼び出せない
• クラス名にContext(意味)が含まれているため、別の用途には使いづらい
![Page 30: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/30.jpg)
Bootstrapに見る失敗例
• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない
• Container(箱)とContents(文字)のスタイルを個別に呼び出せない
• クラス名にContext(意図)が含まれているため、別の用途に利用しづらい
![Page 31: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/31.jpg)
Bootstrapに見る失敗例
• デザインの幅が限定的すぎて、デザイナーのニーズに対応しきれない
• Container(箱)とContents(文字)のスタイルを個別に呼び出せない
• クラス名にContext(意図)が含まれているため、別の用途に利用しづらい
![Page 32: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/32.jpg)
Bootstrapに見る失敗例
div class="alert alert-danger"
ここ
![Page 33: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/33.jpg)
!WARNING 本題です
![Page 34: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/34.jpg)
従来のアプローチ
div class="alert alert-danger"
![Page 35: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/35.jpg)
APICSSのアプローチ
div class="roundedbox roundedbox-red padding-15px" span class="color-red"
![Page 36: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/36.jpg)
Google先生は言いました…
![Page 37: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/37.jpg)
Google先生は言いました…
Bad .color-red { color: red; }
Good .color-caution { color: red; }
![Page 38: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/38.jpg)
‒ Webの教科書
“スタイルの中身が後で修正されることも考えて、
クラス名は意味的なものにしましょう”
![Page 39: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/39.jpg)
‒ Webの教科書
“スタイルの中身が後で修正されることも考えて、
クラス名は意味的なものにしましょう”
![Page 40: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/40.jpg)
‒ Webの教科書
“スタイルの中身が後で修正されることも考えて、
クラス名は意味的なものにしましょう”
Failed
![Page 41: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/41.jpg)
CSS HTML
![Page 42: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/42.jpg)
One Many
![Page 43: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/43.jpg)
CSSの修正は影響範囲が大きいため、
悪影響が出ていないかを目視で確認するのが困難
![Page 44: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/44.jpg)
ページが増える
☟
デザインが増える
☟
CSSが増える
☟
管理に苦労する
☟
破綻する
![Page 45: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/45.jpg)
APICSSの場合
![Page 46: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/46.jpg)
デザインの変更は、HTML側のクラスを操作する
![Page 47: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/47.jpg)
修正前
div class="roundedbox roundedbox-red padding-15px" span class="color-red"
![Page 48: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/48.jpg)
修正後
div class="roundedbox roundedbox-blue padding-15px" span class="color-red"
![Page 49: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/49.jpg)
修正の結果を常に目視で確認できるので安心・安全
![Page 50: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/50.jpg)
大量に変更したい場合は、HTML側を一括置換
![Page 51: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/51.jpg)
Good .color-red { color: red; }
Bad .color-caution { color: red; }
![Page 52: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/52.jpg)
‒ APICSS ルール
“将来どのような意図で利用されてもいいように、
クラス名は内容を表すように命名する”
![Page 53: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/53.jpg)
‒ APICSS ルール
“将来どのような意図で利用されてもいいように、
クラス名は内容を表すように命名する”
![Page 54: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/54.jpg)
‒ APICSS ルール
“将来どのような意図で利用されてもいいように、
クラス名は内容を表すように命名する”
It works
![Page 55: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/55.jpg)
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; }
![Page 56: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/56.jpg)
結果
CSSに追記する機会が劇的に減ります
![Page 57: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/57.jpg)
APICSSCSS meets API
![Page 58: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/58.jpg)
OOCSS × SMACSSObject Oriented CSS × Scalable and Modular Architecture CSS
![Page 59: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/59.jpg)
STOP CSS
![Page 60: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/60.jpg)
《まとめ》APICSSとは
![Page 61: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/61.jpg)
《まとめ》APICSSとは
• HTMLが増えていっても、CSSには極力触らなくて済むCSSの記述法
• 一度発行したクラスは原則修正不可
• 11のファイルに分散させて記述する
• クラスの命名には、意図ではなく内容を盛り込む
![Page 62: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/62.jpg)
《補足》上手に使うコツ
![Page 63: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/63.jpg)
《補足》上手に使うコツ
• デザインを細かく要素分解して、要素を自由に出し入れできるように実装する
• クラス名はSMACSS流に、関連するクラスごとに共通の接頭子を持たせて、衝突を防ぐ
• CSS側への画像の記述は、できる限り避ける
![Page 64: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/64.jpg)
ありがとうございました
![Page 65: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/65.jpg)
byodkm.com/apicss
![Page 66: STOP CSS - APICSS(日本語版)](https://reader033.vdocuments.pub/reader033/viewer/2022052307/5495b262b47959fa5e8b45c9/html5/thumbnails/66.jpg)
Copyright 2013 @tomohiro_kasuga. All right reserved.