「CSS Talk vol.1」参加レポート

先月10月29日にCSS Talk vol.1に行ってきたのですが、ブログをアップできてなかったため、今更ですがレポートです。

CSS Talkとは

CSSをテーマに話をする勉強会です。
当日のスライドはこちら。

ハッシュタグは#csstalkです。
CSSをテーマに話をする勉強会「CSS Talk vol.1」まとめ #csstalk
以下、参加した感想などを書いていきます。

CSSの設計を突き詰めるとエンジニア一人でできるものではないと思う

ビジュアルデザインの意図・意味をコードに反映できたら、デザインもコードも破綻しない。

安田さんの資料「Review the OOCSS」にもあったものですが、自分の中でのCSS設計の一番の課題はここかなと感じています。
最近のweb業界では分業化が進んでいますが、ここのエンジニアとデザイナーとのコミュニケーションが密にとれていないと、結局CSSってカオスになっていきますよね…。
個人的には、ワイヤーを書くディレクターさんも含めて、どういう役割のパーツを作っていくかを話し合うことが大切で、それって案件のスタートの部分のコミュニケーションがどれだけとれてるかも大事だなと思っています。
(そうでないと、デザインが出来上がってから、デザイナーさんに手直ししてもらう、もしくはソースの修正(最悪カオスな状態に)…という事態に…)
突き詰めていくと「コンテンツファースト」を意識したワークフローができるといいのですが、そこの改変って一人ではできないところで、プロジェクトに関わる全員の意識を変えていかないといけないのでなかなか難しいなといつも思ってます。

デザインの制限

CSSをなるべく効率よく書こうと思うと、デザインに制限がかかってくることもあります。
例えば、Bootstrap使うからそれに合わせたデザインをしてほしいとなった場合、デザイナーさんによっては、もっとすきにデザインさせてほしいと思う人もいると思います。
その辺りは、どこに手間をかけるべきなのか、何を重要視するのかという部分で、わりとサイト全体を見て、そのサイトの本質を考えることでもあるなと思います。
制作会社で分業化が進み、効率を求めてくると、その辺りの話し合いがどんどんはしょられてくる気がするので、そういうコミュニケーションをもっととれたらいいなぁと感じる今日この頃です。
(なんかCSSの話のはずが気づいたら愚痴っぽくなってきたのでCSSの話に戻します。)

Foundationについて

しかたさんの記事でFoundationの話があったのですが、存在は知っているものの全然使ったことがなかったので、触ってみようと思いました。
フレームワークを使う機会が業務においてはなかったので、うまいこと使って効率化をしたいです。

display:grid;の話

懇親会でCSSの翻訳をしている方を交え、flexboxってちょっと複雑すぎませんかねという話をしてました。
そのときに「display:grid;」の話もちらっとしたのですが、このあたり使えるようになると組み方がガラッと変わりそうですよね。

実装はまだまだ先そうですけど。
Can I use … | CSS Grid Layout
このへんの仕様も機会があれば、勉強してみようと思います。