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ビットマップ画像を、その。選択されていない画像は、大きなビットマップの一つの行から来て、選択状態の画像が別の行から来ます。選択された画像が選択されていない画像の箱よりも広いと背が高い箱に入れられます。

だから、認知的に管理可能なものにこれを簡素化するプログラムはありますか？それらはより具体的なセレクタにより置き換えられるので、不要である値を識別できるツールはありますか？あなたは不必要に選択のパスを取得しないようにCSSを扱うためのベストプラクティスはありますか？

<時間>

更新：2010-08-31 12時25

だから私は、CSSコードを概念化する方法として、以下のに見えました。私のコードは、以下ではないので、私は見上げ 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午前9時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のspritingを行います。

<時間>

アップデート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_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をサポートし、合理的な方法を考えることができない場合です。

それは素晴らしいことです

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

Answer 2

以下は単なるコメントです。これは、ESP、このような質問に明確な答えを与えることは難しいです。 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で、カスケードは、継承を保証します。きっとあなたは、

のように、のインデックスのあなたのクラス名、idsのためにそれらを交換するためにその時点に得ている場合

#level1

これは、小さな思えるかもしれないが、あなたは、コンパクトで低繰り返しているセレクタを持っている場合、それは本当にメイクCSSがより保守ない - 少なくとも、あなたは、セレクタを通じてそんなに時間スキャンを費やすことはありません。

<時間> ウィジェットのHTML構造は、コード全体で同じである場合は、

、あなたは実際には要素のクラスの一部を交換することができます。それはもちろん、スタイルの再利用を削減しますが、シンプルなウィジェットのスタイルは、クラスけちるするためのウィジェットは、多くの場合、ページの残りの部分と同じ構造とデザインを共有していないされていることを考えると、それは可能なはずです。 （例えば）

のようなセレクタ

.profile img

その両方すぐにあなたがやっていることは明白と同時に、維持しやすい -

は確かに良く、ちょうどそのimgにクラスを与えるよりもだろう。

<時間> あなたがしたいかもしれない何か他のものは、特別な場合のためののみコードを、この非常に単純化した場合と同様に、

にあります

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

a.special {
  color: #B8E9FF;
}

a.brilliant {
  color: #FFAFAF;
}

また、各ケース内の同じまま繰り返しクラスを削除。ここでも、その能力を最大限にカスケードを使用しています。

<時間>

3-5セレクタmaxは珍しいことではありません。それらののすべてののいずれかの3-5かかわらず、です。より多くの例が追加されるCSSセレクタは、論理的には、単純なものから複雑なものまで行く必要があります。このように、あなたの道を、ウィジェットのベースを探してみてくださいデフォルトを定義し、コード。

のコードでは、あまりにも多くのと過度に長いクラス名を含めることを除いて、のあまりにの悪いわけではない自分自身をスニペット。多くの場合、ESP、最適化につながることができますが下から上に書き換え。プロジェクトの要件は、最後の開発以降に変更された場合には（私たちは！万歳、もはやIE6をサポートする必要はありません）しかし、再び、構造を見ることなく、それは決定的な解決策を作るのは難しいです。

Answer 3

それは4つのボタンのためだけなら、私は現代のブラウザでページアップを引き出し、問題のボタンを検査するために開発ツールキット（オペラ座でのFirefoxでFirebugは、トンボ、サファリ/ ChromeのWebKitの開発ツール）を使用したいですそして効果的なスタイルは、それぞれの上にあるものを参照してください。

Answer 4

あなたはこの記事は、私がいない読んをオーバーに行きたいかもしれませんあまりにも長いバック、それがプロの詐欺とのあなたのCSSを整理するのは本当に良い概観を持っています。私はまた、いくつかのより多くの情報へのリンクを持っている記事の下部を見てみたいです。

物事のルックスからあなたのウィジェットのスタイルはclassitisで少し船外に行くように見えるんでしたが、少なくとも、その文書化、私は私が文書化されていないCSSクラスを見てきた回数をカウントすることはできません。

Answer 5

私はあなたのclasesの名前を変更する必要があると思い、私はあなたがほとんどすべてのための「.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>

各クラスは、要素に何か特定の変更

は（すなわち=>フロート左：左）。そして、彼らは、彼らが常に使用することをクラスのライブラリのようにしています。