こんにちは！エンジニアの辻（@dim0627）です！
すっかり春めいてきましたね。皆さんいかがお過ごしですか。 僕は勇者ヨシヒコのシーズン3がAmazon Prime Videoで公開されたせいで寝不足気味です。
さて、今回はHTML/CSSについての話をちょっとだけしようと思います。
HTML/CSSのコーディングにおけるベンチャーあるある
HTML/CSSは比較的勉強を始めやすい分野だと思うんですが、 長く破綻しづらい考え抜かれた設計をするのはなかなか難しかったりします。
例えば、HTML/CSSを書いたことがある人なら、だいたいはこんな悩みを経験したことがあるのではないでしょうか？
- 要素を横並びにするときはfloat？table？absolute？どれを使えばいいの？
- 縦横中央揃えにするときはtable-cell + vetical-align？padding？line-height？どれがいいの？
- clearfixはclear: both？overflow: hidden？
とりあえず思い通りのデザインを実現するだけなら簡単です。
しかし、行き当たりばったりの実装をしてしまうと、似たパーツでもあっちこっちで異なる実装になってしまうことが少なくありません。
スタイルガイドを導入/作成するコストはかけられない
僕がリスタに入社したとき、とりあえずスタイルガイドを作るかーと思って色々調査をしたりしました。
まあスタイルガイドはパーツを一元管理するのが目的だったのでバラバラな実装がまとまるわけではないのですが、コードを俯瞰できると少しは統一に役に立つ部分もあるかと思います。
が、事業のフェーズとしてコストをかけるべきか、運用する上で足かせにならないかという点から一度見送ることにしました。
今後もHTMLはガンガン更新がかかる予定でしたし、ある程度デザイン的に強固になってからでもいいだろうと。
ちなみにそのときに検討していたツールはhologramです。
弊社のJOBLISTはRailsで構築しているので、Rubyで統一できるのがよかったのと、CSSからドキュメントのHTMLを吐き出すことしかしないシンプルさに魅力を感じました。
スタイルガイドのツールって、結構余計なことをするツールが多いんですよね。
よくあるCSSの実装パターンをesaにまとめるようにした
というわけで、折衷案として弊社ではよくあるHTML/CSSの実装パターンをesaにまとめるようにしました。
実現したいパーツに対してCSSの実装パターンが複数ある場合、 パーツの些細な違いに応じて適切な実装パターンがあるものです。
なのでまとめる際には、どういったときにどういった実装をすればいいのか、までをまとめるようにしています。
CSSの統率が少しは取れるようになった
これをやりはじめて、実装がバラバラだったCSSが一気にきれいになるわけじゃないですが、 少なくとも状況が悪化するのを防げてると思います。
また、改修時にリファクタリングもかねて実装をあわせる基準ができたので、少しずつよくなっている実感もあります。
コーディングが楽になった
これまでは各自の趣味に任せた実装でしたが、基準ができたので特に何も考えずにそれに従えばよくなりました。
自分の趣味と違う実装方針だと少し抵抗があるかもしれませんが、それもすぐ慣れると思ってます。
レビューが楽になった
組織によってはCSS/HTMLのレビューをしないところもありますが、弊社ではできるだけCSS/HTMLもレビューするようにしています。
その際に「もっとこうした方がいいよ」っていう実装例を書いていたのが、esaのページのURLを書けばよくなったのでレビューは楽になりました。 esaになければ追加のリクエストを出せばいいので。
しかしあくまで暫定的な対応なので、将来的にはちゃんとUI/UXレベルでコミットしてくれる人がいて、 実装面でもスタイルガイドに近いドキュメントが管理できる体制が作れるといいなと思ってます。
というわけで弊社では絶賛採用活動中です！ 興味を持ってくれた方は@mikedaまたは@dim0627までご連絡ください！
