Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN...
Transcript of Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN...
![Page 2: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/2.jpg)
自己紹介
高津戸壮 (たかつど たけし)
フロントエンドエンジニア
エディタ: MacVim
株式会社ピクセルグリッド
@Takazudo
![Page 4: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/4.jpg)
アンケートで いただいたお悩み
class命名のコツ
CSSを複数人で触る際の設計
部分的にデザインが少し異なるパーツが出てきた時のモ
ジュール化方法
モジュール化していく際、どこまでをモジュールとして
考えればよいか
設定が複雑になるにつれ、チーム内で共有するハードル
があがり、活用できない
![Page 5: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/5.jpg)
なぜCSS設計論が 必要なのか?どのようにでも書ける
知らないスタイルが当たる
上書き地獄
チーム間での意思疎通
→ , , OOCSS SMACSS BEM
![Page 6: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/6.jpg)
大体共通している概念モジュール化
命名規則
継承的な話
![Page 7: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/7.jpg)
![Page 8: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/8.jpg)
![Page 9: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/9.jpg)
![Page 10: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/10.jpg)
block
block̲̲element
block̲̲element̲modifier
dialog
dialog̲̲close‒button
dialog̲̲menu
dialog̲̲menu̲hidden
![Page 11: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/11.jpg)
<button class="button button_caution">...</button> <button class="button button_pdf">...</button> <button class="button button_play">...</button>
![Page 12: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/12.jpg)
すべてが解決するか?どうモジュールを切ればいいのか
class名をどうつければいいのか
複雑になってしまうのだが?
具体的にどう設計するかっていう話はまた別
![Page 13: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/13.jpg)
![Page 14: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/14.jpg)
Enduring CSSとはBen Frainの著書
Enduring: 長続きする、永続的な、不朽の、我慢強い、辛抱強い
設計方法論+アドバイス集的な内容
考え方を必要に応じて取り込めば良さそう
![Page 15: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/15.jpg)
ECSSいわく自分には既存の設計論がぴったりマッチしなかった
複雑になりすぎでは?
サイトがスケールしたら結局破綻するのでは?
パフォーマンス突き詰めすぎでは?
↓
こう考えたらよいのでは?というもの
Webアプリを想定している
![Page 16: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/16.jpg)
ECSSの基本的な考え方全体で一つとして考えない
分けて考える
![Page 17: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/17.jpg)
1. モジュール化
2. 名前空間
3. アセットの分離
4. クラス名の命名規則
![Page 18: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/18.jpg)
1.モジュール化モジュールとは一体?
![Page 19: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/19.jpg)
ECSSでのモジュールざっくり言うと…
最も大きい単位の機能領域
![Page 21: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/21.jpg)
トップページ
チャプタページ
目次
![Page 22: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/22.jpg)
そんな細かくはしない
ネストしたりもなるべくしない
![Page 23: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/23.jpg)
![Page 24: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/24.jpg)
![Page 25: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/25.jpg)
![Page 26: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/26.jpg)
![Page 27: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/27.jpg)
![Page 28: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/28.jpg)
同じようなものも別物 なぜか?
そっちのほうが分かりやすいから
複雑化を防ぐことができるから
同じようなCSSを何度も 書かないといけないのでは?
それでもいい。gzipとかすればいい
![Page 29: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/29.jpg)
2.名前空間モジュールを名前空間でグルーピングする
![Page 30: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/30.jpg)
![Page 31: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/31.jpg)
![Page 32: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/32.jpg)
![Page 33: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/33.jpg)
topPage, productDetail, shoppingCart
![Page 34: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/34.jpg)
common
![Page 35: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/35.jpg)
名前空間の分け方例CMSで出しているテンプレートが違う
ここだけWordPressで出している
サイト全体で共通
管理する部署が違う
![Page 36: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/36.jpg)
3.アセットの分離名前空間ごとに読み込むCSS、JS、画像類を完全に分離
![Page 37: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/37.jpg)
分離すると何が嬉しい?CSS、JS、画像の干渉を防げる
名前空間単位でまるごと消せる
どのファイルをいじればいいのか明白
どこにファイルを置けばいいのか明白
![Page 38: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/38.jpg)
![Page 39: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/39.jpg)
![Page 40: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/40.jpg)
![Page 41: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/41.jpg)
分離しなかったら?このCSS消していいんだろうか…
この画像どこに置けばいいんだろう…
このモジュール変更するのが怖い
いや、そもそも変更出来ないし消せない
![Page 42: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/42.jpg)
4.クラス名の命名規則BEM的命名規則に名前空間の考えを足したもの
![Page 43: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/43.jpg)
![Page 44: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/44.jpg)
![Page 45: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/45.jpg)
![Page 46: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/46.jpg)
![Page 47: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/47.jpg)
![Page 48: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/48.jpg)
BEMでは……Block .tabElement .tab__itemModifier .tab__item--active
![Page 49: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/49.jpg)
<ul class="tab"> <li class="tab__item"><button>One</button></li> <li class="tab__item tab__item--active"><button>Two</button></li> <li class="tab__item"><button>Three</button></li> <li class="tab__item"><button>Four</button></li> </ul>
![Page 50: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/50.jpg)
ECSSでは…….ns-Module_ChildNode-variant
Module .tp-TabChild node .tp-Tab_ItemVariant .tp-Tab_Item-active
![Page 51: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/51.jpg)
<ul class="tp-Tab"> <li class="tp-Tab_Item"><button>One</button></li> <li class="tp-Tab_Item tp-Tab_Item-active"><button>Two</button></li> <li class="tp-Tab_Item"><button>Three</button></li> <li class="tp-Tab_Item"><button>Four</button></li> </ul>
![Page 52: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/52.jpg)
改めてECSSのサイトを見てみる
トップページ
チャプタページ
目次
![Page 53: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/53.jpg)
モジュール名決定の難しさ
media? imageBlock? productItem?
![Page 54: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/54.jpg)
汎用的な名前 media にしたとするモディファイアを多用して複雑化
どこで使われているか分からない
結果CSSを変更できない
当然このモジュールのCSSは消せない
似たのが出たらmedia2?その使い分けを把握するのは困難
何回も使いまわせるのでCSS容量的には ハッピーではある
![Page 55: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/55.jpg)
名前空間の嬉しさ
tp-Media
![Page 56: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/56.jpg)
tp-Mediaトップページだけで使う想定で作っている
どこで使われるのか明確
どこかで使われるかもと考える必要がほぼ無い
いらなくなったらトップページだけ見て消せる
tp-FeaturedProductとか具体的にしてよい名前空間というスコープ内で考えることができる
同じようなモジュールが出ても別モジュール として考えることになるのでCSS容量的には増大
![Page 57: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/57.jpg)
まとめECSSは「分けて」考える
だからいくらでもスケールできる
管理と名前付けにシンプルさをもたらす
無理のない管理を実現する
ミニマムなCSSを目指すものではない
最高のパフォーマンスは求めていない
![Page 58: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/58.jpg)
実際どう?名前付けに頭を悩ませることが減る
怖くて触れないを避けられそう
管理が別れるサイトで特に有効そう
ビルドを頑張らねばならなそう
一人で管理している場合はそんなにかも
![Page 59: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/59.jpg)
ありがとう ございました
![Page 61: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/61.jpg)
ECSS
Enduring CSSの設計思想
知っておきたいHTMLテンプレート設計法
![Page 62: Enduring CSS - GitHub Pages · ß Ãu ûì à kWpuk]c Ôìòǧòȧò·Ê¡ §Æ¢¾ .BD7JN ×ävÓ®ºê¯éÂÈ!5BLB[VEP](https://reader035.fdocuments.in/reader035/viewer/2022070807/5f0596157e708231d413b25a/html5/thumbnails/62.jpg)
オマケサイト全体で共通のモジュールは?
同じようなモジュールがあるよ
mixinやextendしたいのですが?
WAI‒ARIA
複雑なCSSの記述は避けるべきである
ビルドについて