CSSデザインはComponents指向になって、BeMはなくなる？〜Web Components時代のCSSデザイン(座談会)に参加してきた〜 #html5exp

白石さんの主宰する HTML5 Experts の公式イベントに参加してきました。あるテーマについて、業界の著名人がパネルディスカッションするこの企画。前回までは、クローズドで開催していたのですが、今回から公開イベントになったようです。今までにも、2回参加させてもらっているのですが、内容も濃厚で気づきも多い良い会です。定期的に開催されるようですので、Facebookページをフォローしてみてください。

今回のイベントページ：https://www.facebook.com/events/831024777036209/

本日の登壇者

• 高津戸さん(ピクセルグリッド)
• 小原さん(ピクセルグリッド)
• 榊原さん(リレーションデザイン研究所)

ちなみに、ピクセルグリッドさんは、コードグリッドというフロントエンド技術者向けの有名ブログを運営しているそうです。

テーマ1.CSSデザインの過去・現在

ここからは、パネルディスカッションの内容を文語に改めて紹介していきます。

3年前のCSSデザインはどんなだった？

• 当時からbootstrapはあったが、デザイナー向きでなく、開発者向けだった印象。
• クライアントワークにはとても使えない。。。
• デザイナーにフォトショでカンプ起こしてもらって、それをコーディングすることが多く、ピクセルパーフェクトだったことが記憶深い。

• ブラウザごとの違いが認知されだした
• それまではCSSの設計について語る人がいなかった

現在のCSSデザインとは？

• CSS4に期待している。たとえば、lighten()が便利だけど、さすがにまだ実践レベルでは使えない。
• Sassをずっと使っている。
• compassはメンテが終わってしまったこともあり、使っていない。nodeのSassのほうが軽いし。
• インブラウザデザインができるようになった
  • 以前はブートストラップぐらいしかなかった
  • 手でワイヤー書いて、ブラウザで作りあげていく
  • PhotoshopやIllustratorも触っておらず、web媒体のためのツールは使ってない。（会場にアンケート取ったところ、約3割のかたが手を上げてました）
  • cssフレームワーク は必須。
  • foundation をずっと使っている。
  • bootstrap は使わなくなった。
• 何かには固執してない。Illustratorで素材だけ作ることもあるし、早い方を選ぼうようにしてる。（このかたは、エンジニアライクなデザイナーさん）
  • インブラウザデザインもやったことはあるけど、デザインしながらコーディングする人の手法であって、デザインやるための手法ではないと思っている。そのまま組んで終わりならいいけど、デザインをブラッシュアップするものではない。トライ&エラーが遅い。テーブルのレンダリング周りについては、jsfiddleでtableやボタンを組んでから、イラレに落とし込むことはある。。
  • アニメーションはjsfeedで動くものを作ってしまって、そのコードをIllustrator上に貼って参考にさせたりとかもする。
  • プロトタイピングツールも特に使っていない
• 受託onlyだと、負債のありそうなフレームワークは使えないので、自分たちでライブラリ書いて拡張していくほうが多い気がしてる。
  • 拡張しなければ、css フレームワーク と付き合ってくことは可能かも

CSSデザインの近未来

• Components指向（再利用） がくる？
• Atomic Designという理論。
• しかし現実は・・・
  • bootstrap 以降 div まみれになった
  • 使っていないはずなのに捨てていいか悩むcss
• 新技術：Web Coomponents
  • Custom Elements
  • Shadow DOM
  • 個人の設計指向はなくなり、これで全て済むようになるかもしれない。
  • iframeみたいに組み込めるのはいい（ webcompornents.org ）
• 近未来で考えたら、大きな変化はないかも？
• BeMは、不要になる確率が高そう。
  • BeMはCSS設計なので、Sassでは使わなくていい
  • まずBeMがいなくなる見込み。
• 「俺の作ったデザインに知らんcssが当たってて困る」問題
• css in module は、ローカルファーストでやりたい。
  • react 使って頑張る！ とかでないと今はない
  • これを仕様として作ってるのが web compornents。 画面単位で compornent 化していることもある。
• Enduring CSS （ECSS）いいよ

感想

いかがでしたでしょうか？

初期のbootstrapは開発者がとりあえず見た目を整えるためのものだった、という指摘にグッと来ました。 管理画面とか、とりあえずbootstrap適用しましたって感じの見かけますよね・・・。開発者的には救世主だったと思うんですけど、フロントエンジニアにとっては・・・(´▽) ',、'`,、

あと、最近の私のコーディングはbootstarpさえ使わずに、ブラウザ見ながらゴリゴリ書きがちだったので、反省しました。。。なんでcssフレームワークの存在を忘れてたんだろうか（汗）flexさえ知らなかった私ですし、ビジネスコーダーから早く脱却したい！

とりあえず、foundationともっとお近づきになりたいですね。たとえば、iframe埋め込み系の外部サービス使った時に、イケテナイCSSが勝手にかかるとき。それに対するreset.cssを作っちゃって、foundationとか適用した方がお手軽に、いい見た目になるのでは？という妄想をしたので、今度試してみます。作るぞー！