cssを書くときに考えていること、やっていること
社内でCSS勉強会をやろう的なことが話題に上がってて、誰かに師事されたわけでもなく5年間ずっと片手間でCSSを書いてきたからあんまり体系たてて教えることが難しいな、とここ半年ぐらい悩んでて、最近チーム内でhtmlとかCSSを書く人が増えてきて、ウッアッとなっているので、そろそろなんかいい感じに考え方をダンプしておこうか、というところで、寝起きにつらつらと書いてみる。あとでesaにもまとめる。
主に「書き始める前」「書いているとき」「書き終わった後」の3つのセクションで僕がどういう思考をしているのかを書く。
書き始める前
コーディングに慣れないうちとか、巨大なページのコーディングをするときは、カンプを紙に印刷をしてシャドーコーディングをやる。
これは、紙に印刷されたカンプに四角の枠線を書いたり、その脇にクラス名を添えるなどして、全体のDOMの構造を頭で整理しながらどういうhtmlにするかを考える。
僕はこれを設計書と呼んでいて、この設計書があることで、例えばコーディングが得意な人に事前にレビューしてもらう（WIPのPRのアナログ版）ことができる。
そんで、重要なのはこのときにCSSのことはほとんど考えないことだと思う。実際にはコーディングしていくうちに微妙に整合性がとれないことがでてくるので、そのときに改めて設計書を見返してどうやって整合性をとるかを考えたりする。
整合性が取れないというのがうまく説明できないんだけど、もうなんというか経験でやっていくしかなくて、たまに設計書に書いていることと実際に書くときに合わないときがある。けど、それは経験を積めば減っていくものだ。
書いているとき
主な書き方は最初にレイアウトで row とか col-xs-5 とかもりもり書いてテキスト流し込んで書けた、と思ったらブラウザを見る、という流れを繰り返している。細かい装飾は割りと最後のほうにやってる。
この時エディタは左右のペインに分けて、右にhtmlファイル、左にCSSのファイルを開いている。左右に開いていることで視線の移動を減らしたり、タブ移動の時間を短縮している。
また、ブラウザのリロードに関しては browser-sync を使っていて、ファイルの更新を検知してブラウザの自動リロードを行っている。
Rails とか Ruby であれば rack-livereload とかもあるので自分のプロジェクトに合わせて採用してみてください。ディスプレイが2枚以上あれば確認用のディスプレイとエディタ用のディスプレイにできるのでよりコーディングを効率良くできるでしょう。
CSSプリプロセッサの採用は前提として、CSSフレームワーク（bootstrapとか）も積極的に採用すべきで、いつも書いているような便利ユーティリティはたいていCSSフレームワークが用意しているので、ドキュメントも実装も全部読むことでよりコーディングを素早くできるのでおすすめ。
書き終わった後
CSS書くの基本的にだるくて完成した後、だいたいの人がdiffもろくに見ずにコミットしてるような様相をよく見る。
CSSは基本的にプリプロセッサを使っていたとしても、雑に書けば無限に雑に書くことができて、そういうフレームワークや言語の上でコードを書いている意識を持ったほうがいい。RubyとかRailsを書いてたら書いた人の意志がコードに現れるので読みやすいことが多い（なによりテストが書ける）が、CSSはそうじゃなく名付けもモージュルの分割の仕方も冗長であるとかゆるいシンタックスとかそういうのが落とし穴になってて、レビューするときにすごい疲れる。
どういうCSSが良いとするかは各チームのスタイルガイドがものをいうと思う。そこは各位がんばってくれ。
例えばCSScombというライブラリを使えばコードのスタイルに関しては一貫性を持たせることが可能だけど、divタグに block であることをCSSで定義していたり、名付けが冗長だったりまたは略しすぎだったり、変更に弱いユーティリティのクラス名だったりとかは検知が難しいので、どうにかしたいなと思う。
まとめ
CSSを書くときに機械的にどうにかするという（静的解析とかrubcop的な）手法や、複数人でコーディングするときのベストプラクティスがまだよくわかってなくて日々悩んでいるんだけど、なんでこんなに悩んでいるかというと、ここ最近は数万行のレガシーなCSSと戦っていて、どうにかして数万行ほどCSSを削除していく上で、さらに千数百行のCSSが追加されていくのを眺めていて悩みが深く夜もあまり寝付けないという状態なのであった。
特に機械的な手法としては、CSSはテストが書けないという問題があって、これに関しては、CSSの変更を検知したらCIか何かでサービスの全ページのスクリーンショットを撮影して前回のスクリーンショットとの差分を比較して差分がある画像だけ、画像とそのURLを添える、みたいなのを考えているので頑張ってみたいですね。
