我正在处理一段看起来像这样的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 sprites从一个位图中显示四个位图图像，其中一个是选中的。未选择的图像来自大位图的一行，而处于选定状态的图像来自另一行。选定的图像放入一个比未选择的图像框更宽更高的框中。
那么是否有一个程序可以将其简化为认知可管理的东西？是否有一个工具可以识别哪些值是不必要的，因为它们被更具体的选择器取代？是否有处理CSS的最佳实践，以便您不会获得不必要的选择性路径？
更新：2010-08-31 12:25
所以我研究了less作为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 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 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>
答案 0 :(得分：3)
以下只是评论;很难对这样的问题给出确切的答案，尤其是。当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的时间就好了，比如
#level1
它可能看起来很小，但如果你有一个紧凑且重复性较低的选择器，它确实能让CSS更易于维护 - 至少你不会花太多时间在选择器上扫描。
如果窗口小部件的HTML结构在整个代码中是相同的，那么您实际上可以替换元素的某些类。它当然会降低样式的可重用性，但考虑到窗口小部件通常不会与页面的其余部分共享相同的结构和设计，因此更简单的窗口小部件样式应该可以在类上使用。选择者喜欢（比如说）
.profile img
img一个类更好 - 它既可以立即显示你所做的事情，又可以同时轻松维护。
您可能想做的其他事情是仅针对特殊情况的代码，就像这个非常简化的案例
a {
color: white;
background: #666;
text-decoration: none;
}
a.special {
color: #B8E9FF;
}
a.brilliant {
color: #FFAFAF;
}
此外，删除在每种情况下保持相同的重复类。再次，使用Cascade充分发挥其潜力。
最多3-5个选择器并不罕见。但是，每个其中一个是3-5。随着更多案例的增加，CSS选择器在逻辑上应该从简单变为复杂。因此，尝试找到窗口小部件的基础，定义默认值，然后编写代码。
除了包含太多且过长的类名之外，代码段本身并非太坏。从下往上重写通常可以导致优化，尤其是。如果自上次开发人员以来项目的要求发生了变化（我们不再需要支持IE6了，请继续！）但是，再一次，如果没有看到结构，很难做出明确的解决方案。
答案 1 :(得分：1)
如果它仅用于四个按钮，我会在现代浏览器中提取页面并使用开发工具包（Firefox中的Firebug，Opera中的Dragonfly，Safari / Chrome中的WebKit开发人员工具）来检查相关按钮并了解每种样式的有效样式。
答案 2 :(得分：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结尾的ID）会很棒，但我想不出仍然支持IE6的合理方式。
我只是看到您已将li设置为display: inline，同时保留块元素。你需要小心，因为尽管技术正确的CSS，它的确切渲染并没有真正定义。您可以考虑使用display: inline-block或float: left。
答案 3 :(得分：0)
你可能想要过去this article我读的时间不长，它对组织你的CSS的专业人士和组织有一个非常好的概述。我还要看一下文章的底部，它有一些链接到一些更多的信息。
从你看来，你的小部件样式看起来似乎有点太过分类，但至少记录下来了，我无法计算我看过未记录的css类的次数。
答案 4 :(得分：0)
我认为您需要更改您的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>
其中每个类更改元素上的特定内容（即left =＆gt; float：left;）。他们喜欢他们一直使用的课程库。