おやまのエンジニアリングブログ

某ゲーム開発会社のフルスタックエンジニアしてます

「後で直す」を援助する shame.css

後で時間があったら戻って治す。そう自分に言い聞かせて、適当なコードを書いてしまう。でも、いつの間にか忘れてしまったり、他人が編集→影響範囲が不明確に→修正不可なんてことになってしまっていることが殆どではないでしょうか。

これが長期に渡って繰り返されると コードが !importantだらけになり、上書きセレクターが大量に定義されます。まさにカオスですね。


これを解決することはできないかと色々調べていたら、shame.css という良さげなものを見つけました。これは、ツールCSSのルールセットではなく、「後で直すコード」は全部まとめて、shame.cssという別ファイルに入れてしまえという思想らしいです。

この手法を適応すると以下の様な良い事があるらしい…

  • メインのCSSをキレイにしておくことができる
  • コードが最適ではない事を明確にできる
  • 他人が修正しやすい
  • git blame shame.css

また適応するにあたって厳守するルールがあるらしい。それは以下の通り…

  • ハックだったらshame.css に書く
  • ハックは全てドキュメントする。必須項目は以下の通り。
    • どこで使われているのか書く
    • なぜ必要なのか
    • どうしてこれで治るのか
    • 時間があったらどう治したいのか
  • shame.cssを定期的に掃除する

!important大量に入っているCSS読むのはもうウンザリなので、とりあえず次のプロジェクトではshame.cssを実装してみようと思っています。

 

ソース
shame.css - http://csswizardry.com/2013/04/shame-css/