Blog Entry  (Dec. 9, 2015, 3:42 p.m.)

Tilo Mitra's avatar

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の実装者が覚えなければいけないことを出来るだけ少ない方がいいのではないかという考えです。

だからこの場合 <i class='pronama-01-1'></i> とだけ書けばいいという設計の方が好きです。

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

おわりに

最近の css 設計にはあまり明るくないのですが、こういう場合の定石ってあるんですかね?世に出回っているライブラリをざっと見ると <i class="fa fa-shopping-cart fa-lg"></i> と書くパターンと <i class="icono-cart"></i> と書くパターン両方ありました。

でも感じとしては <i class="[ライブラリ名]-[icon名] [オプション]"></i> というのが多いのかな?

元の記事へ