Grooves開発ブログスマートフォン用の表示で見るGrooves開発ブログ2016-05-16CSSスタイルガイドを作って良かった話こんにちは、デザインチームの@_ringogirlです。Jobsでは、最近デザインのリニューアルを行いました(最近と言っても3ヶ月前の話ですが...)。リニューアルに合わせてCSSのリビングスタイルガイドを作ることにしました。実際に作っているスタイルガイドはここで公開しています。スタイルガイドとはCSSのドキュメントのようなもので、サイトで使う色やタイポグラフィ、UIパターンなどを記述したものです。見た目とコードをドキュメントとして読めるので、チームで開発するときの共有に役立ちます。スタイルガイドを作ったのか僕が入社したのは約1年前なのですが、その頃からCSSがとっ散らかって肥大化してしまっていたので、CSSを触るのがつらい状況になっていました。ドキュメントも無かったので、どこにCSSコンポーネントが定義されているのか探さないといけないし、コードを書くまで見た目がわからない、色を定義された変数が多すぎて管理ができない、など様々な問題がありました。このような状況を解決したかったのと、継続的にCSSをメンテナンスできる環境を作りたくてスタイルガイドを作ることにしました。エンジニアがデザインに関することで悩むことが減って、開発速度が上がればいいなという思いもあります。やって作ったのかHologramというGemを使用して作っています。KSSなど有名なものもありますが、やることが少なくて複雑ではない印象だったのでHologramを選択しています。技術的なことについては長くなってしまうような気がするので、別の記事で書いていきます。スタイルガイドの管理方法プロダクト上で作っていくのではなく、別リポジトリで開発をしています。npmで管理して、そこからプロダクトに読み込むという方法をとりました。スタイルガイドを作って良かったことコンポーネントのスコープを狭めることができたプロダクトとスタイルガイドを分離することで、プロダクトのレイアウトなどに左右されないようなコンポーネントを書きやすくなりました。機能ごとにコンポーネントを定義できるので、スコープが狭くなりメンテナンスしやすくなったと思います。CSSの管理がしやすくなった上でも書きましたが、スタイルガイドをnpmで読み込んでいるので管理しやすくなりました。スタイルガイドの変更がプロダクト側にコミットされないので、コミットログの見通しもよくなった気がします。エンジニアがある程度は楽できるようになったまだまだ問題はありますが、以前よりはデザインに関することで悩むことが減ったんじゃないかなと思います。チーム共通のドキュメントなので、コミュニケーションが取りやすくなった気がします。新しい技術を学ぶことができたES2015やReactなど、スタイルガイドで新しい技術を学ぶことができました。Hologramのプラグインを書いて拡張することも楽しかったです。肥大化したCSSに継ぎ足していくのはつらかったので、こういったところで楽しみができるのも良かったです。今後の展望スタイルガイドの運用は始まりましたが、不便なところや不十分なところがまだまだ多くあり、以下のようなことを考えていたりします。11:03CSSスタイルガイドを作って良かった話Tweet関連記事2018-04-18本当に良いエンジニアはいないのか?企業が採用に苦戦する本質とはこんにちは。事業責任者を務めている...2017-12-22ユーザーニーズを把握する「UXリサーチ集中講座」に参加しましたみなさまこんにちは。