IE6とIE7のCSSで複数クラスによるスタイル適用するときの不具合について

参考にさせて頂いたページ

以下のようなhtmlとcssがあったとすると

.class1.class3.class2 {  
  background: gray;  
}

<div class="class1 class2 .class3">ほげほげ</div>

cssのセレクタの最後に.class2が記述してあるので、IE6では

.class2 {  
  background: gray;  
}

と同様の解釈をするみたい。

OOCSSはIE6に対しても有効な手法とのこと。

以下はダメな例です。最後に記述されたクラスが同じ.coverです。

.girl.cover{
 background:green;
}
.boy.cover{
 background:red;
}

以下は良い例です。最後に記述されたクラスが.girlと.boyです。

.cover.girl{
 background:green;
}
.cover.boy{
 background:red;
}

SMACSSなどで、.is-hogeなどのmodifierを使用する場合は記述の順番に気を配る必要がありそうです。

今の仕事に必要なわけでもないのですが、そういえばと思ったので覚書です。