Web Developer's Struggle Memories

日々の業務から思ったこと、学んだことを書き連ねていきます。

「【座談会】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デザインはどんな感じでやってますか?

  • 最近はRubyCompassは使っていない(マジか!)
    • 保守されてないし、そもそも重い
    • もうnodejsのものを使っている
  • 現在はインブラウザで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などでバババって作った先のデザインは?
    • パーツを増やすとき、組み込みモジュールだけでは足りない
    • 自作するけど、思ったよりコンポーネントは使いまわせない
    • 現実ではそんなに再利用できないよ