CSS Nite LP, Disk 26「CSS Preprocessor Shootout」 に参加しました
年明けの 1/12（土）に、CSS Nite LP, Disk 26に参加してきました。
東京のセミナーは昨年6月の、LP23につづいて 2度め。
安定のアウェイ感。
既に結構な時間が経過して、記憶もおぼろげになってますが、思い出し思い出し感想を書いてみたいと思います。
以下セッション内容です。
- 基調講演: CSSの設計 - 高津戸 壮さん（ピクセルグリッド）
- パフォーマンスから考えるSass/Compassの導入・運用 - 石本 光司さん（サイバーエージェント）
- LESS is MORE: CSSプリプロセッサをシンプルに使う - 谷 拓樹さん（サイバーエージェント）
- Stylusが目指す"CSSプリプロセッサ" - 佐藤 歩さん（サイバーエージェント）
- CodeKitで始める次世代Web制作 - 木村 哲朗さん、西畑 一馬さん（まぼろし）
- 新世代エディタで作る、プリプロセッサー環境構築術 - たにぐち まことさん（エイチツーオー・スペース）
- 環境に合わせて快適コンパイル生活 - こもり まさあきさん
- GREEを支える技術フロントエンド版 - 山田 あかねさん（GREE）
- 毎日の料理のためのSass - 池田 拓司さん（クックパッド）
- CSSプリプロセッサーの登場・発展から考えるCSSデザインの過去・現在・未来 - 小久保 浩大郎さん（Google）×高津戸 壮さん、小山田 晃浩さん（ピクセルグリッド）
という、今流行りのCSSプリプロセッサ周りの盛り沢山な10セッション。
集中力がもつかどうか心配でしたが、長くても1セッション35分なので意外といけました。
でも気を抜いてると、ぱっ、ぱっ、ぱーて終わっちゃうので、逆に集中力いるんかな？
全体的な構成としては、
- セッション1 - プリプロセッサ以前のCSS設計の話
- セッション2,3,4 - 各プリプロセッサ（Sass,LESS,Stylus）の紹介
- セッション5,6,7 - コンパイルツールの紹介
- セッション8,9 - プリプロセッサの実用事例
- セッション10 - 今後の夢を語る
みたいな印象でした。
順序立てて聞くことができて、よかったと思います。
セッション概要
高津戸さんのセッション
CSSの設計のお話し。
- モジュールを積み重ねていく
- クラス名は使い回しできることを主に
- 便利クラスをつくる
- ある程度あきらめろ
モジュールを積み重ねていく、というのは弊社でも似たようなことをしてます。
サイト全体で使用するパーツ（モジュール）をつくっていって、ページを制作するときに基本的にそのパーツを使っていきます。
その際、モジュール名に抽象的だけど抽象的すぎない、機能的な名前を付けるようにしてます。そうすることによって、サイト全体のどこで使用しても問題ないモジュールになります。
ただ、その為には事前にサイト全体の構成を理解し、どこにどういったコンテンツが入るのかということを可能な限り理解しないと、適切なモジュール名をつけられないと思います。
そして、そういった基本にあてはまらないものには、別途便利クラスを作成し、微調整がおこなえるようにしていってます。
んで、あと、デザインする人もこういう設計に対して理解がないとダメですね。
じゃないとばらんばらんなデザインきて、( ⁰⊖⁰)…てなります。
石本さん・谷さん・佐藤さんのセッション
サイバーエージェントのお三方による、Sass,LESS,Stylusについてのお話し。
それぞれのプリプロセッサの特徴を簡単に話されてました。
個人的にはLESSから入って、業務で使用してます。
Sassもちょいちょい触ってて、会社の環境をMacに移行した今のタイミングだと、やっぱSassかなー？って思いました。
全部つかえて、案件によってわければいいじゃん とかいう意見もあるかと思いますが、いまんとこSassやっとけばLESSもStylusもあまり躊躇せず使えるだろうし、
ちっちゃい会社で複数のプリプロセッサ使い分けるメリットをあまり感じないんですよね、、、
なんかあるかな？
でもStylusは触ってみたいので、なんか案件来たら勝手に使ってみようかと思ってます。
木村さん・西畑さん・たにぐちさん・こもりさんのセッション
ツールを使ったコンパイルのお話し。
GUI、CUIいろいろなご紹介がありましたが、いまのとこCodekitが最強そうな印象です。
なので素直にCodekit買います（会社で
しかしGUIはMacのツールばっかでしたねー。
Winに関しては1,2コでしたかね(;´-`) しかもMac版もあるやつ。
ちなみにWin環境でLESSのコンパイルはこれつかってました。
こもりさんのセッションで、「GUIで操作できるまで待つか、コマンドに慣れるのが先か」というフレーズがありましたが、コマンドに慣れてしまえば両方選択できるってことですもんね。GUI出るかわかりませんし。
個人的には最近黒い画面がすきになってきたので、CUIまわりの知識や環境を充実させていこうと思います。
山田さん・池田さんのセッション
GREEとクックパッドの中の方による、自社サービスに対するCSSプリプロセッサの実用事例のお話し。
お話しを聞いてて、楽しそうだな−って思いました。
特にクックパッドでは、Saraという独自CSSフレームワークをSassで構築しているとの事。
そういうのって刹那的に過ぎ去ってゆく案件ではなく、時間をかければかけただけ使いやすく洗練されていくんだろうなと思います。
適当に設計したら痛い目みるのは自分だし、考え、実践し、育てていく楽しさがそこにはあるんだろうなと思いました。
自社ではどうでしょう？案件毎にフレームワークってあんまピンとこないですが、
根本的なとこをフレームワークっぽくはできるんかな？
そのへんCSSプリプロセッサ絡めていい業務フローがつくれたらいいですねー。
あと、GREEではコンパイルにシェルスクリプトを利用してるそうです。
これはGUIがなかったり、黒い画面触るのが嫌なスタッフがいるとき重宝しますね。
検討したいところです。
自分、インハウスのが向いてるんかしら とちょっと思いました。
小久保さん・高津戸さん・小山田さんのセッション
Sassエバンジュリストである、Google小久保さんのセッションに、途中ピクセルグリッドのお二人が補足等入れていくというスタイル。
今あるCSSプリプロセッサの機能が、ブラウザネイティブな機能になるというのはいいですね。
でもそうなるとまたブラウザ毎に挙動が違ってきて、それ用のハックが生まれてくるんでしょうね。
感想など
参加して印象に残ったのは、
- 黒い画面こわい
- Codekit最強
の2点でした。
登壇者の方がこわいこわい言うので、余計にこわい印象ついちゃった気がしました。
でもGUIツールもあるから心配ないよ！てフォローはあったけど。
ぼく自身、黒い画面を触りだしたのは半年ほど前です。
まだまだわからないことばかりですが、ちょっとやったらすぐ苦手意識は払拭されると思うんですけどどうでしょう？
フロントエンドの人は黒い画面さわれないとダメだよ！ぐらいな勢いに今後はなっていくんですかね。
gitもあるし。
まあ、今回のCSSプリプロセッサに関してだけではないですが、Codekiteのような便利なGUIは使いつつ、今後は黒い画面でも困らないようどっちもできるようにしていこうと思いました。
あと今回、当日のお手伝い要員として、運営にも携わらせていただきました！
東京日帰りで行ったので今度はゆっくり行きたいです。
運営・登壇・参加者のみなさま、ありがとうございました！
現場からは以上です。
