自己紹介
高津戸壮 (たかつど たけし)
フロントエンドエンジニア
株式会社ピクセルグリッド
@Takazudo
<button class="button button_caution">...</button> <button class="button button_pdf">...</button> <button class="button button_play">...</button>
抽象化による解決
分離による解決
Atomic Design
Enduring CSS
Enduring CSSの考え基本はモジュール化
ただし、抽象化しない
その先には複雑化が待っている
結果としてメンテナンスのコストが増えすぎる
分離することによって解決する
時間とともに変化する状況で 完全な抽象化など不可能である
モジュールの粒度たくさんのモジュールを集めて ひとかたまりのUIを作ってもよいよ?
ECSSでは分離できることを重要と考える
ECSSにおけるモジュールの定義 「視覚的に認識できる 個別の機能領域のもっとも大きな区分」
/* ������ topPage modules */ .tp-MainVisual { ... } .tp-Carousel { ... } .tp-NewsList { ... }
/* 商品詳細 productDetail modules */ .pd-ItemDescription { ... } .pd-ItemMainPhoto { ... } .pd-Carousel { ... }
/* ��������� shoppingCart modules */ .sc-ItemList { ... } .sc-UserInfo { ... }
.namespaces ├── common │ ├── common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage ├── topPage.css └── topPage.js
.namespaces ├── common │ ├── common.css │ └── common.js ├── productDetail │ ├── productDetail.css │ └── productDetail.js └── topPage2 ├── topPage2.css └── topPage2.js
分離しなかったら?旧topPageリソース消せないですよね?
このCSS消していいんだろうか…
この画像どこに置けばいいんだろう…
このモジュール変更するのが怖い
いや、そもそも変更出来ないし消せない
<div class="tab"> <button class="tab__item">One</button> <button class="tab__item tab__item--active">Two</button> <button class="tab__item">Three</button> <button class="tab__item">Four</button> </div>
ECSSでは…….ns-Module_ChildNode-variant
Module .tp-TabChild node .tp-Tab_ItemVariant [aria-current="true"]
variantにはwai‒ariaとかも使うと良いぞと
<div class="tp-Tab"> <button class="tp-Tab_Item">One</button> <button class="tp-Tab_Item" aria-current="true">Two</button> <button class="tp-Tab_Item">Three</button> <button class="tp-Tab_Item">Four</button> </div>
モジュールの 汎用性について
汎用的にしたら複雑になる
一度作ったモジュールは二度と消せない
無限に増えるモディファイア
運用の負荷も上がる
最初の想定が貫き通せるとは限らない
汎用的にしても管理しきれないのでは?
汎用的なものをつくってもいい しかしそれは消せなくなる
本当に完全に分けるのか?必ずしもそう強制するわけではない
汎用的に使える名前空間 sw(SiteWide)の例PostCSSやSassの変数の利用は推奨 (色、マジックナンバー、z‒index)
mixinの使用も許可。ただし最小限 そこで抽象化はしない
基盤となるレイヤーは極力薄く
ECSS以前のワタシ抽象化による整理
それこそがクールなCSS設計
CSSが複雑?まぁ仕方ない
デザインも統一、整理してこそ良い設計
変更されるデザイン
増え続けるモジュール
なかなかうまくいかないナァ
ECSS以後のワタシすべてを一緒にして考える そのスタートラインが間違ってた
まずは分けて考える
その上で共通化できるところを考える
CSS設計のミニマルさだけが美しさではない
あとで編集することを考えたらどう設計すべきか
デザインが統一されていること コードとして同一であること 常に一緒ではないかも
ECSSに習うべきか?ガチガチにECSSに従う必要は別にない
分けて管理したらどうか?という視点
Webアプリケーション向けと著にはある
汎用コンポーネントを組み合わせて デザインしたい場合にはそこまで向かなそう
部分的に考えを採用しても意味があるかも
Enduring CSSまとめ管理できることが大事
スケールできることが大事
そのために抽象化を諦める
ミニマムなCSSを目指すものではない
最高のパフォーマンスは求めていない
運用や設計指針に応じて採用してみてはいかが?
Enduring CSS
CodeGrid ‒ Enduring CSSの設計思想
CodeGrid ‒ 知っておきたいHTMLテンプレート設計法
HTML5 Experts.jp ‒ Enduring CSS
Top Related