CSSを構造化するSmart*CSS

ずっと、のどに骨が引っかかっていた感じだったのですが、ようやく思い出しました。Smart*CSSの存在を。

これを使うと、

#header div{スタイル};
#header a:hover{スタイル};

という記述をですね、

#header{
　　　 div{
　　　 　　　 スタイル
　　　 }
　　　 a:hover{
　　　 　　　 スタイル
　　　 }
}

というような書き方で設定できるのです。
CSSのカプセル化とまではいきませんが、｛｝で設定の範囲を明示することで、スパゲッティーコード化を抑制することができます。

ただ、phpとmod_rewriteが使える環境じゃなければいけません。といってもモバイルサイト構築環境で、phpとmod_rewriteが使えないなんてありえないので、特に問題なく導入できるかと思います。

詳しくはこちら

Lism.in

こちらに書き方の事例が載っています。カンマ併記もできるというすばらしさ。設定を継承しないスタイルの一括設定なんかも簡素に掛けそうですね。

Lism.in

なお、Smart*CSSはSmartyで動いているので、Smartyを使ってるモバイルサイトはすぐに実装できそうですね。