cssスプライト作ったけど設計に迷った

プロ生ちゃんアドベントカレンダー2015の10日目です。

www.adventar.org

プロ生ちゃんのドット絵をcssで扱ってみました

f:id:flow58:20151210151836p:plain ソースコードとデモ

css設計について

今回はプロ生ちゃんドット絵をcssスプライトにしたという話なのですが、css設計にちょっと悩みました。ここではSCSSやLESSのことは考えずに書いています。

今回のcss設計

まず、今回書いたcssのスプライト全体の共通設定として以下のように各クラスを羅列して書いています。

.pronama-01-1,
.pronama-01-2,
.pronama-01-3,
/* ... */
.pronama-running{
  display: inline-block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url('https://dl.dropboxusercontent.com/u/6396527/all.png');
}

さらに縦型のスプライト用の設定は次のように追記しています。

.pronama-01-1,
.pronama-01-2,
.pronama-01-3,
/* ... */
.pronama-running{
  width: 32px;
  height: 64px;
}

この書き方は共通部分は分離しつつHTMLもシンプルにするという思想のもとに書いています。しかし、ソースを見てもらえればわかるようにクラスを羅列する部分が多くなってしまいます。

<i class="pronama-01-1"></i>

もうひとつのcss設計

もうひとつの方法として、クラス名を羅列せずに共通で使える別クラスを用意する方法も考えられます。

.icon {
  display: inline-block;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
  background: url('https://dl.dropboxusercontent.com/u/6396527/all.png');
}

.standing {
  width: 32px;
  height: 64px;
}

この書き方はクラス名を羅列する必要が無くcssがシンプルになる反面、HTMLには依存するクラスを全て指定しなければならないため今度はHTMLが複雑になります。

<i class="icon standing pronama-01-1"></i>

なお、どちらの書き方でも以下のように各クラスのbackground-positionを指定している部分は変わりません。

.pronama-01-1{
  background-position: 0 0;
}

結局どちらが良いか

どちらも一長一短ありますが、僕の場合は前者の設計が好きです。僕の設計の仕方のひとつとして、使う側のインターフェースから設計し始めるというのがあります。この場合の「使う側」はHTMLのことです。HTMLとcssの実装者が違う場合はこの考え方は特に有効だと思っていて、HTMLの実装者が覚えなければいけないことを出来るだけ少ない方がいいのではないかという考えです。

だからこの場合とだけ書けばいいという設計の方が好きです。

もちろん、これはプロジェクトや実装者によって考え方は変わると思います。

おわりに

最近のcss設計にはあまり明るくないのですが、こういう場合の定石ってあるんですかね？世に出回っているライブラリをざっと見るとと書くパターンとと書くパターン両方ありました。

でも感じとしてはというのが多いのかな？

58FLOW

Android、行動経済学、ガジェットなどが好きです。日々感じたことなんかを書きます。