2

我正在处理一段看起来像这样的现有 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 代码的方式。而且因为我的代码不是更少，所以我查找了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>
4

5 回答 5

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 中，级联保证了继承性，所以在所有类名中添加前缀是必要的。当然，如果你已经到了索引你的类名的地步，是时候把它们换成ids 了，比如

#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，万岁！）但是，如果没有看到结构，很难做出明确的解决方案。

于 2010-08-31T16:16:45.697 回答
1

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

于 2010-08-31T15:53:51.997 回答
1

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

内部类apl_widget_labelandapl_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（以 结尾的ID s），那就太好了，但我想不出一种仍然支持IE6的合理方式。

我只是看到您已将其设置为li，display: inline同时将块元素保留在其中。您需要注意这一点，因为尽管是技术上正确的 CSS，但它的确切渲染并没有真正定义。您可以考虑display: inline-block或float: left代替。

于 2010-09-02T14:11:22.393 回答
0

你可能想回顾一下我不久前读过的这篇文章，它对组织你的 CSS 的优缺点有一个非常好的概述。我还要看一下文章的底部，它有一些指向更多信息的链接。

从外观上看，您的小部件样式确实与 classitis 有点过火，但至少它已记录在案，我无法计算看到未记录的 css 类的次数。

于 2010-08-31T15:54:23.667 回答
0

我认为您需要更改类的名称，我看到您对几乎所有内容都使用“.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;）。他们有一个他们经常使用的类库。

于 2010-08-31T16:13:27.527 回答