如何简化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个选择，使得它真的很难找出适用的规则。这里有对造型四个按钮与文字25级的规则。它不可能是那么难！

一些背景资料：此CSS样式的该示出了四个位图图像时，选择其中的一个，从单个位图使用CSS子图形小部件。未选中的影像来自于大位的一行，在所选择的状态的图像来自另一行。所选择的图像被放入盒比未选择的图像的盒更宽和更高。

那么，有没有一个计划，将简化这个东西认知管理？是否有一个工具，它可以识别，因为它们被更具体选择哪些替换值是不必要的？是否有与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九时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_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同时保持块元素insde他们。你需要小心，因为尽管被技术正确的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

如果它只是四个按钮，我会拉向上翻页在现代浏览器和使用开发工具包（Firefox中的Firebug，蜻蜓在Opera，Safari /铬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>

，其中每个类改变元件上的东西具体（即左=>浮动：左）。他们有一样的一个类库，他们总是使用。