如何简化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

所以我研究了 less 作为概念化 CSS 代码的一种方式。因为我的代码不在 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 结构不可用时。

---

真正吸引我的第一件事是长类名。当你在类的名称中有如此多的重复时，我认为你做错了什么。 像“Really”这样的名称

.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

There's just no point for this!”在 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，万岁！）但同样，在没有看到结构的情况下很难制定明确的解决方案。

Answer 2

根据发布的 HTML，我建议进行以下更改：

内部类 apl_widget_label 和 apl_widget_value 是不必要的，可以简单地替换为唯一元素（在 中是唯一的）李）。这可能会使选择器稍微长一些，但结构更好并且更具可读性。此外，链接周围的 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 来代替。

Answer 3

如果它只是四个按钮，我会在现代浏览器中拉出页面并使用开发工具包（Firefox 中的 Firebug、Opera 中的 Dragonfly、Safari/Chrome 中的 WebKit 开发人员工具）来检查有问题的按钮，看看有什么每个都有有效的样式。

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 {

为什么不创建另一个名为“mini-display”的类，然后你的元素将是这样的：

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

你的CSS将是：

.mini-display{..}

如果你不喜欢它......我见过一些人创建这样的类

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

其中每个类都会更改元素上的特定内容（即 left => float:left;）。他们有一个他们经常使用的类库。