「【座談会】Web Components時代のCSSデザイン」の参加メモ

かなり面白くかつ刺激的な座談会だった！以下のメモはだいぶ雑記。間違い + 誤認もあるとは思う。（componentとコンポーネントが混在している、なども）

アジェンダ

ベストプラクティスを探りたい
Web Componentsはこの先避けては通れない

• CSSデザインの過去・現在
• Web Components時代のCSSデザイン
• CSSデザインの未来

登壇者

• 高津戸さん（ピクセルグリッド）
• 小原さん（ピクセルグリッド）
• 榊原さん（一般社団法人リレーションデザイン研究所）

◯CSSデザインの過去・現在

▼3年前のCSSデザインはどんな感じでしたか？

• iOS7 がフラットデザインを2013年採用
  • Bootstrapもそれに追随
  • 元々のBootstrapはデザインができないエンジニアのため
• 昔は背景に画像をベースに置いていた
  • その上にピクセル単位で1ミリのズレも許さずコンテンツを置いていた
  • いわゆるピクセルパーフェクト
• 全社的に汎用的な骨となるデザインが決まっていた
  • それを加工していた
• CSSの設計はレゴのイメージ
• OOCSS
  • 例えばbuttonのデザイン
  • btnクラスを付けてそのデザインを決める
    • これをベースに他のボタンにはbtn-*とクラスを付けて拡張（継承のイメージ）
    • これもレゴのイメージ
  • 実装を伴ってない、概念的なもの
    • オブジェクティブCSSではない
  • BootstrapもOOCSSの流れの延長とも言える
• 効率的なcss（例えばAtomic CSS）
  • 細切れにパーツを作る（どんどん作る）
  • クラスが大量になるかもしれないが…
    • それは良いか悪いか、好きか嫌いかの違い
• cssクラス設計やデザインをやってみてもWebで見ると大体変更する
  • だからあまりCSS設計段階ではあまり細部にこだわってない
  • ただし、実装者には綺麗に作って貰いたいのであまりツッコまない（どうせ後で変わる）
  • パーツ単体ではデザインは決まらない
• 色は難しい問題
  • Sassなどでも変数や関数で色を決められる（組み込み関数もある）
  • ただ、あまりこれでは綺麗にはならなかったりする
  • CSS Color Moduleというものも作ろうとしている

▼現在のCSSデザインはどんな感じでやってますか？

• 最近はRubyのCompassは使っていない（マジか！）
  • 保守されてないし、そもそも重い
  • もうnodejsのものを使っている
• 現在はインブラウザでCSSの実装ができる！
  • まず手でワイヤーフレーム作る
  • ほいでブラウザで作る
  • その代わりCSSフレームワークは必須
• モバイルファーストで作る
  • 軽く作りきってしまってあとで改良
  • 手でバババって作れるものはインブラウザで、じゃなければエディタで設計
• デザインフレームワークの良し悪し
  • どれも重さはついて回る
  • かと言って全てオリジナルでデザインを作るのもナンセンス
  • デザイン・コーディングのどちらかが優先とかはない
    • デザインありきでのコーディングが当たり前でもない
• 受託だと
  • お客さんの要件に決まる
  • フレームワークはある程度決まってしまっている
  • 結局拡張orハックするしかなくなる
  • だから社内フレームワークになっている（事が多い）
• いやいや、軽いものであればハックもそれほど重くはない
  • 黎明期でもあるし、やっぱりフレームワークの利点は魅力
  • 余計なコストを掛けなくて良くなる

◯Web Components時代のCSSデザイン

スライドはこちら↓↓↓

speakerdeck.com

• Components指向（再利用）の設計
  • 再利用性を今まではデザインで解決してきた
  • これを技術で解決しよう
    • 同じ「パーツ」は再利用性しよう => components
    • その思考プロセスを理論化したものがAtomic Design
• ただ、実際はカオス…
  • !important地獄（奪い合いなど）
  • 冗長なcssのクラスに準じたdivタグ地獄
  • デバイスごとの表示でさらにdivタグ地獄
  • など…etc
• JavaScriptを用いることがほぼ前提
  • htmlには独自タグを生成（例: 検索ならsearch-barタグを作る）
  • JavaScriptがよしなにDOMを構成してhtmlに返す
  • もちろんcssのクラスもセットされて
  • これがWeb Components

◯CSSデザインの近未来

• ブログパーツが昔流行った
  • あれはiframeで実装されることが多い
  • それをWeb Componentsでやれるんじゃないかな
• モジュール単位、コンポーネント指向は分けて考える必要がある
  • コンポーネント指向は昔からある
  • モジュール単位がWeb Components？
    • Shadow DOMだったり
• CSS Modules
  • ローカルcssファースト（グローバルではない）
  • Web Componentsの時代
  • jsのフレームワークでは
    • Angular, ReactなどはComponents単位でcss
    • 細かいところはフレームワークがよしなに切り分けてくれている（はずw）
    • そのスコープだけで効くcss
• BEMについて
  • ブロックという集合の塊でネームスペースを区切る
  • ただし無限に塊が増える
  • BEMの頭に何か接頭辞を付けてネームスペースを区切る
  • 物理的にはディレクトリ（画面単位）で分ける
• jQueryプラグインのデザインは？
  • デザインはハックせず、そもそもdatepickerなどを自社で作っちゃう（ほえっ！？）
  • 要件にあったものを探し、なければ作っちゃう
• Ionic2などでバババって作った先のデザインは？
  • パーツを増やすとき、組み込みモジュールだけでは足りない
  • 自作するけど、思ったよりコンポーネントは使いまわせない
  • 現実ではそんなに再利用できないよ
    • フレームワークの組み込みはもちろん再利用できるよ！