css - CSS コードを単純化する方法

Question

私は、次のような既存の CSS コードを使用しています (はるかに大きなコード本体から抜粋)。

.apl_widget_fourLevel {
margin:0 auto 1em;
overflow:hidden;
/* zoom:1 */ /* IE Sheet */  
}

/* a panel container */
.apl_widget_fourLevel .apl_widget_level {
    float:left;
    position:relative;
    overflow:hidden;
    text-align:center;
    width:102px;
    height:150px;
    margin:0 1px 0 0;   
}

/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_client1 .apl_widget_level {
    height:auto;
}

/* extra height for widgets with the supplementary data beneath the panels */
/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level {
    height:auto;
    width:90px;
}

/* reset width for selected mini panels */
.apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected {
    width:102px;
}

    /* the gray label in the panel 
       enforce for mini display */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
        position:absolute;
        top:20px;
        left:0;
        width:100%;
        margin:0;
        color:#555;
        font-weight:normal;
        text-transform:uppercase;
        font-size:100%;
        line-height:1.0em;
        z-index:1;
    }

    /* offset for mini labels */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_label {
        margin-top:20px;
        font-size:85%;
    }

    /* label cascade reset for IE6, sigh */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {
        margin-top:0;
        font-size:100%;
    }

    /* the value displayed in the panel */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_value,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
        position:absolute;
        top:45px;
        left:0;
        width:100%;
        margin:0;
        color:#fff;
        font-weight:bold;
        font-size:28px;
        line-height:1.0em;
        z-index:1;
    }

    /* offset for mini value */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_value {
        margin-top:15px;
        font-size:24px;
    }

    .apl_widget_fourLevel.apl_widget_client1 .apl_widget_level .apl_widget_value {
        margin-top:3px;
        font-size:20px;
        font-weight:normal;
        opacity:0;
        -moz-opacity:0;
        -webkit-opacity:0;
        filter: alpha(opacity=0);
    }

    /* value cascade reset for IE6, sigh  */
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_value {
        margin-top:0;
        font-size:28px;
    }

    /* range values smaller */
    .apl_widget_fourLevel.apl_widget_fourLevelRange .apl_widget_level .apl_widget_value {
        margin-top:7px;
        font-size:15px;
    }

    .apl_widget_fourLevel .apl_widget_value a {
        color:#fff;
    }

    /* supplemental value beneath the panel */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore {
        position:absolute;
        bottom:0px;
        left:0;
        width:100%;
        color:#0072ad;
        font-weight:bold;
        font-size:28px;
        z-index:1;
    }

    .apl_widget_fourLevel .apl_widget_level .apl_widget_valueScore a {
        color:#0072ad;
    }

    /* low values will be lighter color */
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore,
    .apl_widget_fourLevel .apl_widget_level.apl_widget_levelLow .apl_widget_valueScore a {
        color:#30a2dd;
    }

    /* the image container element */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_panel {
        overflow:hidden;
        width:100%;
        height:135px;
        position:relative;
    }

        /* the panel image itself */
        .apl_widget_fourLevel .apl_widget_level .apl_widget_panel img {
            position:absolute;
            top:0;
            left:-5px;
            margin-top:-150px;
        }

        /* Individual Level image offsets */
        .apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img {
            left:-5px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level2 .apl_widget_panel img {
            left:-105px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level3 .apl_widget_panel img {
            left:-205px;
        }

        .apl_widget_fourLevel .apl_widget_level.apl_widget_level4 .apl_widget_panel img {
            left:-305px;
        }

        /* mini panel offsets */
        .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level .apl_widget_panel img {
            margin-top:-300px;
            margin-left:-6px;
        }

        /* reset image offset via margin for highlighted/selected style */
        .apl_widget_fourLevel .apl_widget_level.apl_widget_levelSelected .apl_widget_panel img {
            margin:0;
        }

これに関する私の主な問題は複雑さです。すべてのルールには 3 ～ 5 個のセレクターがあり、どのルールが適用されるかを判断するのが非常に困難です。4 つのボタンをテキストでスタイリングするための 25 のルールがあります。それは難しいことはできません！

背景: この CSS は、CSS スプライトを使用して単一のビットマップから選択された 4 つのビットマップ画像を表示するウィジェットをスタイルします。選択されていない画像は大きなビットマップの 1 つの行から取得され、選択された状態の画像は別の行から取得されます。選択された画像は、選択されていない画像のボックスよりも幅と高さが高いボックスに入れられます。

では、これを認知的に扱いやすいものに単純化するプログラムはありますか? より具体的なセレクターに置き換えられたために不要な値を特定できるツールはありますか? 不必要に選択的なパスを取得しないように、CSS を処理するためのベスト プラクティスはありますか?

---

更新: 2010-08-31 12:25

そこで、CSS コードを概念化する方法として、lessを検討しました。私のコードは less にはないので、css2lessを調べました。問題のコードで css2less が生成するものの抜粋を次に示します。

.apl_widget_fourLevel {
    margin:0 auto 1em;
    overflow:hidden;

    .apl_widget_level.apl_widget_level1 {
        .apl_widget_panel {
            img {
                left:-5px;
            }
        }
    }
    .apl_widget_level.apl_widget_level2 {
        .apl_widget_panel {
            img {
                left:-105px;
            }
        }
    }
    .apl_widget_level.apl_widget_level3 {
        .apl_widget_panel {
            img {
                left:-205px;
            }
        }
    }
    .apl_widget_level.apl_widget_level4 {
        .apl_widget_panel {
            img {
                left:-305px;
            }
        }
    }
    ....
}

つまり、ここにあります: apl_widget_levelX は実際には一意です。良いツールがこれを生成できると思います：

img#apl_widget_level1 { left:-5px; }
img#apl_widget_level2 { left:-105px; }
img#apl_widget_level3 { left:-205px; }
img#apl_widget_level4 { left:-305px; }

.apl_widget_fourLevel {
    margin:0 auto 1em;
    overflow:hidden;
    ....
}

選択/選択されていない要素に対する同様のコメント。

私は答えがどこに向かっているかが好きですが、私の人生を楽にするツールを探しています. このファイルの完全な CSS コードは 2500 行で、スイート全体は 11000 行です。

---

更新: 2010-09-01 09:50

これは私が手でそれを変えたものです：

ul.apl_widget_content {
    width: 492px;
    height: 140px;
    position: relative;
}
ul.apl_widget_content li {
    background: url(/home/hbrown/tmp/widget_fourlevel_1.png) no-repeat;
    list-style: none;
    display: inline;
    position: absolute;
    text-align:center;
    text-transform:uppercase;
}

#apl_widget_level1 {
    left:5px; top: 0px;
    background-position: -13px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level2 {
    left:105px; top: 0px;
    background-position: -113px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level3 {
    left:205px; top: 0px;
    background-position: -213px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level4 {
    left:305px; top: 0px;
    background-position: -313px -300px;
    width: 86px; height: 133px;
}
#apl_widget_level1s {
    left:5px; top: 0px;
    background-position: -5px 0px;
    width:102px; height: 133px;
}
#apl_widget_level2s {
    left:105px; top: 0px;
    background-position: -105px 0px;
    width:102px; height: 133px;
}
#apl_widget_level3s {
    left:205px; top: 0px;
    background-position: -205px 0px;
    width:102px; height: 133px;
}
#apl_widget_level4s {
    left:305px; top: 0px;
    background-position: -305px 0px;
    width:102px; height: 133px;
}
div.apl_widget_label {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.selected .apl_widget_label {
    padding-top: 15px;
}
div.apl_widget_value {
    font-size:24px;
    margin-top:10px;
}
.selected div.apl_widget_value {
    margin-top:15px;
}
.apl_widget_value a {
    text-decoration:none;
    color:#FFF;
}

以前は 175 行でした。現在75行。ほとんどのコード (40 行) で CSS スプライトが実行されます。

---

更新 2010-09-01 11:30

HTML は次のようになります。

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div class="apl_widget_label">Level </div>
        <div class="apl_widget_value"><a href="#">1</a></div>
    </li>
    <li id="apl_widget_level2">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">2</a></div>
    </li>
    <li id="apl_widget_level3s" class="selected">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">3</a></div>
    </li>
    <li id="apl_widget_level4">
        <div class="apl_widget_label">Level</div>
        <div class="apl_widget_value"><a href="#">4</a></div>
    </li>
</ul>

HTML は以前は次のようでした。

<div class="apl_widget_strand_fourLevel apl_widget_fourLevelMini">
    <div class="apl_widget_content">
        <div class="apl_widget_level apl_widget_level1 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">1</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level2 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">2</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level3 apl_widget_levelSelected">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">3</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
        <div class="apl_widget_level apl_widget_level4 ">
            <div class="apl_widget_label">Level</div>
            <div class="apl_widget_value"><a href="#">4</a></div>
            <div class="apl_widget_panel">
                <img alt="" src="widget_fourlevel_1.png">
            </div>
        </div>
    </div>                    
</div>

Answer 1

以下は単なるコメントです。このような質問に決定的な答えを出すのは難しいです。HTML構造が利用できない場合。

---

最初に本当に私を惹きつけたのは、長いクラス名でした。クラスの名前にこれほど多くの繰り返しがある場合、何か間違ったことをしていると思います。のような名前

.apl_widget_fourLevel .apl_widget_level.apl_widget_level1 .apl_widget_panel img

実際には（次のように）短縮する必要があります：

.apl_widget .fourlevel .panel img

特に、セレクターが基本的に 90% 反復的である場合は、次のようになります。

.apl_widget_level.apl_widget_level1

これだけでは意味がありません！CSS では、カスケードによって継承が保証されるため、すべてのクラス名にプレフィックスを追加するだけで済みます。確かに、クラス名のインデックスを作成するところまで来たら、次idのようにそれらを sに交換する時が来ました

#level1

小さいように見えるかもしれませんが、コンパクトで反復の少ないセレクターを使用すると、CSS の保守性が向上します。少なくとも、セレクターのスキャンにそれほど多くの時間を費やすことはありません。

---

ウィジェットの HTML 構造がコード全体で同じである場合、要素のクラスの一部を実際に交換できます。もちろん、スタイルの再利用性は低下しますが、ウィジェットがページの他の部分と同じ構造やデザインを共有していないことが多いことを考えると、より単純なウィジェット スタイルではクラスを軽視することができるはずです。セレクターのような (言う)

.profile img

単にクラスを与えるよりも確かに良いでしょうimg-それはあなたがしていることをすぐに明らかにし、同時に維持するのも簡単です。

---

他にやりたいことは、この非常に単純化されたケースのように、特別なケースのみをコーディングすることです

a {
  color: white;
  background: #666;
  text-decoration: none;
}

a.special {
  color: #B8E9FF;
}

a.brilliant {
  color: #FFAFAF;
}

また、各ケース内で同じままである繰り返しクラスを削除します。ここでも、カスケードを最大限に活用してください。

---

最大 3 ～ 5 個のセレクターは珍しくありません。ただし、それらのすべてに対して3〜5です。CSS セレクターは、より多くのケースが追加されるにつれて、単純なものから複雑なものへと論理的に移行する必要があります。したがって、ウィジェットのベースを見つけて、デフォルトを定義し、上に向かってコーディングしてみてください。

コード スニペット自体は、含まれているクラス名が多すぎて長すぎることを除けば、それほど悪くはありません。ただし、ボトムアップから書き直すと、特に最適化につながることがよくあります。プロジェクトの要件が前回の開発者から変更された場合 (もう IE6 をサポートする必要はありません!) しかし、繰り返しになりますが、構造を確認せずに決定的なソリューションを作成することは困難です。

Answer 2

ボタンが4つだけの場合は、最新のブラウザーでページをプルアップし、開発ツールキット（FirefoxのFirebug、OperaのDragonfly、Safari / ChromeのWebKit開発者ツール）を使用して、問題のボタンを調べ、内容を確認します。効果的なスタイルはそれぞれにあります。

Answer 3

投稿された HTML に基づいて、次の変更を提案します。

内部クラスapl_widget_labelとapl_widget_valueは不要であり、単純に一意の要素 ( 内で一意li) に置き換えることができます。これにより、セレクターが少し長くなる可能性がありますが、構造が改善され、読みやすくなります。また、divリンクは直接スタイルを設定できるため、リンクの周囲は不要です。

<ul class="apl_widget_content">
    <li id="apl_widget_level1">
        <div>Level </div><a href="#">1</a>
    </li>
   ...

と

.apl_widget_content li div {
    padding-top: 35px;
    font-size: 85%;
    font-weight:normal;
    top: 20px;
    line-height:1em;
}
.apl_widget_content li.selected div {
    padding-top: 15px;
}
.apl_widget_content li a {
    font-size:24px;
    margin-top:10px;
    text-decoration:none;
    color:#FFF;
    display: block;
}
.apl_widget_content li.selected a {
    margin-top:15px;
}

topレベル ルールの、widthおよびheightプロパティをルールに移動することもできul.apl_widget_content li(.selected)ます。

ul.apl_widget_content li {
   ...
   top: 0px;
   width: 86px; 
   height: 133px;
}

ul.apl_widget_content li.selected {
    width:102px; 
}

#apl_widget_level1 {
    background-position: -13px -300px;
}

「選択されたレベル」の ID ( で終わるもの) を取り除くことができれば素晴らしいことですが、sそれでも IE6 をサポートする合理的な方法は思いつきません。

ブロック要素をそれらの中に保持liしながら、にを設定したことがわかりました。display: inline技術的に正しい CSS であるにもかかわらず、その正確なレンダリングは実際には定義されていないため、注意が必要です。display: inline-blockまたはfloat: left代わりに検討することができます。

Answer 4

私が少し前に読んだこの記事を読み直したいと思うかもしれません。それはあなたのCSSを整理することの賛否両論の本当に良い概要を持っています。また、記事の下部にもいくつかの詳細情報へのリンクがあります。

見た目からすると、ウィジェットのスタイルは分類に少し行き過ぎているように見えますが、少なくとも文書化されているので、文書化されていないcssクラスを見た回数を数えることはできません。

Answer 5

クラスの名前を変更する必要があると思います。ほとんどすべてに「.apl_widget_label」を使用し、セレクターに応じて要素のスタイルを設定していることがわかります。

例えば：

/* the gray label in the panel 
   enforce for mini display */
    .apl_widget_fourLevel .apl_widget_level .apl_widget_label,
    .apl_widget_fourLevel.apl_widget_fourLevelMini .apl_widget_level.apl_widget_levelSelected .apl_widget_label {

「ミニディスプレイ」と呼ばれる別のクラスを作成しないと、要素は次のようになります。

<div class=".apl_widget_label mini-display">..</div>

あなたのcssは次のようになります：

.mini-display{..}

気に入らなければ... このようなクラスを作成する人を見たことがあります

<div class="left margin-auto big red ...">..</div>

ここで、各クラスは要素に固有のものを変更します (つまり、左 => float:left;)。そして、彼らは常に使用するクラスのライブラリのようなものを持っています。