CSSのリファクタリングでした5つのこと
- 2015/10/16
- atsuko.a
こんにちは、フロントエンドエンジニアのあつこです(ΦωΦ)
今回は、現行サービスのCSSをリファクタリングした話とどんな影響があったかをまとめたいと思います。
もくじ
- 経緯とか
- 実際にした5つのこと
- まとめ
経緯とか
開発期間約9ヶ月、リリースして1年の現行サービスのCSSが大変なことになっていたので
リファクタリングすることにしました。
ちなみにリファクタリングとは、
ソフトウェア開発では、ソースコードの作成が進むにつれて、中途での設計変更やバグフィックスなどでプログラムは冗長で汚いものとなっていくことが多い。これらの問題点を解決し、将来の仕様変更に柔軟に対応できるようソースコードの手直しを行うことを「リファクタリング」という。
リファクタリングとは｜refactoring - 意味/解説/説明/定義 ： IT用語辞典
ということのようです。
問題点は大きくわけて2つ。
1. コーディングルールが適応されていない
現在弊社のフロントエンドには共通のコーディングルールがあるのですが、このサービスの開発着手後に策定されたので適応外になっていました。
2. ありえない量のCSS
リリース前の段階で仕様変更・追加の嵐。
人員的にも機能的にも想定以上の規模拡大を見せたためCSSの設計がおざなりになっていました。
Sassがテスト導入されたプロジェクトだったこともあり、恐ろしいことにメインのCSSが1万行を超えました。
ひとことで言うと無法地帯のCSSを、
- コーディングルールに沿って
- それなりの設計で
- 詳細度をコントロールしやすく
リファクタリングすることを目標にします。
今回のリファクタリングではシステム工数を割けないので、HTMLを変更せずCSSのみで対応することになりました。
出来ることは限られますが、class名の変更も無し。
開発環境には既にgulpが入っているので、それを利用します。
実際にした5つのこと
実際のリファクタではざっくり以下のことをしました。
- Scssファイルの再分割・再構築
- ネスト階層のチェック
- ベンダープレフィックスの見直し
- extendの一部include化
- 出力形式の変更
それぞれの詳細と結果をまとめます。
1.Scssファイルの再分割・再構築
ふんわり分けられていたScssファイルを、再分割・再構築しました。
既存のclass命名やらを考慮した結果、相性がよさそうなitcssっぽくしました。
class名の変更は出来ないので、あくまでも「っぽい」感じです。
また、分割されたファイルの中で500行を超えたら内容を見直すようにしました。
例外はありますが、ファイルの肥大化を避けることで内容の複雑化を避けるためです。
大きくなったファイルは再度分割したり、一部内容を他のファイルに移動したりします。
結果
- どこに何があるかわかりやすくなった
- 詳細度のコントロールがしやすくなった
- 分割したScssファイル数が増えた（30→45くらい）
2.ネスト階層のチェック
詳細度がコントローラブルになったことで不要なネストが多く発生したので、ネストが4つ以上のブロックはなるべく3つまでに収まるように変更しました。
結果
- CSSの見通しが良くなった
- 詳細度が下がった
3.ベンダープレフィックスの見直し
各所でついたり付いていなかったりしたベンダープレフィックスを、対象ブラウザを参照しつつ見直しました。
ブラウザの対応状況はCan I useを参考にしました。
結果
- 記述量が減った
4.extendの一部include化
clearfix等ファイルをまたがって使用するセットがextendになっていて出力が恐ろしいことになっていたのでincludeに変更しました。
clearfixの継承方法はextend派include派あるようですが、「ファイルをまたがったextendはしない」というルールを設けたためこのプロジェクトではincludeになりました。
その他共通化出来そうな部分は引数を使いつつmixinにしました。
結果
- 出力がすっきり
5.CSSの出力形式の変更
GUIコンパイラからそのまま出していたものを、gulpプラグインでもごもごと再整形しました。
gulp-minify-css
gulp-csscomb
結果
- 改行が減ってファイルサイズ減
- プロパティの並び替えによってgzipに最適化
まとめ
結果、1万行を越えたCSSは2人日で1700行になるという脅威のダイエットに成功しました。
ここまで減ると今まで何やってたんだよ、とすら思いますね。
目標だった
- コーディングルールに沿って
- それなりの設計で
- 詳細度をコントロールしやすく
も達成できました。
が、基本的には全ての作業目視だったので地味アンド地味。そして目がいつも以上に疲れました。
みなさんはこんな事になる前にちょっとずつ最適化しましょう_:(´ཀ`」 ∠):_
今後は、class名をぽそぽそ改修しつつベンダープレフィックスの自動付与タスクを組み込みたいなぁと思っています。
サービスと共にソースも（良くも悪くも）育っていくものなので、適宜経過観察が必要ですね。
それでは今日はこの辺で！
