CSS圧縮の限界点

CSS圧縮には限界があります。私がSnowballに実装しない機能のうち一つはそういう理由です。それは共通部分をまとめるという機能です。

共通部分をまとめるとは

.redbutton{
    width:300px;
    height:50px;
    display:block;
    background:#F00;
    border:1px solid #333;
}
.bluebutton{
    width:300px;
    height:50px;
    display:block;
    background:#00F;
    border:1px solid #333;
}

を

.redbutton,.bluebutton{
    width:300px;
    height:50px;
    display:block;
    border:1px solid #333
}
.redbutton{
    background:#F00
}
.bluebutton{
    background:#00F
}

のようにすることです。いっけん問題がなさそうですね。短くなったし管理しやすいです。というかこれはあまり問題ありません(汗)。 (これ、.redbutton,.bluebuttonとしないでclassにbuttonと追加しましょう。そうすればより管理しやすくなります)

次のような場合問題が出ます。

<html>
    <head>
   <style>
    .b{
        color:#000;
    }
    .error{
        color:#F00;
    }
    .a{
        color:#000;
    }
    </style>
   </head>
    <body>
        <div class="a error">a</div>
        <div class="b">b</div>
    </body>
</html>

これをまとめると

<html>
    <head>
   <style>
    .a,.b{
        color:#000;
    }
    .error{
        color:#F00;
    }
    </style>
   </head>
    <body>
        <div class="a error">a</div>
        <div class="b">b</div>
    </body>
</html>

なんと、aが赤くなってしまいました! これは困ったなー(棒読み) という訳でなぜやってはいけないかをしめしてみました。

CSS圧縮でこれはできないとご理解ください。あとこれ気をつけてください

Panda Noir

JavaScript の限界を究めるブログでした。最近はいろんな分野を幅広めに書いてます。

CSS圧縮の限界点

プロフィール

SNS