如何简化CSS代码

我与现有的一段CSS代码，看起来像这样（从代码大得多体摘录）工作：如何简化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>

来源

2010-08-31 hughdbrown

你能展示一些HTML吗？基于知道HTML的外观来优化CSS会更容易，再加上也许更改HTML可能会导致更优化的CSS。 – RoToRa 2010-09-01 14:10:31

你需要支持IE6吗？使用IE6不支持的东西可能会有更多的优化。 – RoToRa 2010-09-01 14:12:15

@RoToRa：添加了HTML。是的，需要IE6支持。在Firefox中测试，嗯。 – hughdbrown 2010-09-01 15:35:57

基于所张贴的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。

来源

2010-09-02 14:11:22 RoToRa

我喜欢这个。尽管如此，我仍然觉得没有好的工具来重构或合理化CSS。更改为显示：inline-block和float：left未更改FF中的外观。我想象那是你的预期。 – hughdbrown 2010-09-03 18:55:38

我为兼容的浏览器创建了良好的CSS，但在IE6中出现了“双边距浮动错误”和“浮动元素折叠父元素”错误。用“display：inline;”结束修复你指出，这不是准确的CSS。 – hughdbrown 2010-09-09 17:13:54

我仍然希望有这方面的工具。 – hughdbrown 2010-09-09 17:14:13

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

来源

2010-08-31 15:53:51 ngroot

你可能想要超过this article我读的时间不长，它对组织你的css的专业版和控制台有着非常好的概述。我还会看看文章的底部，它有一些链接，提供更多信息。

从外观上看，你的小部件样式似乎与classitis有点过分，但至少有它的记录，我无法计算我看过无证css类的次数。

来源

2010-08-31 15:54:23 mwgriffith

我认为你需要改变你的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 => float：left;）。他们有一个他们经常使用的类库。

来源

2010-08-31 16:13:27 pleasedontbelong

以下仅为评论;很难给出像这样的问题的明确答案，尤其是，当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 S，像

#level1

它可能看起来很小，但它确实让CSS，如果你更容易维护已经有了精简的选择器，而且重复性更低 - 至少你不会花太多时间通过选择器进行扫描。

如果小部件的HTML结构在整个代码中都是相同的，那么您实际上可以换出一些元素的类。它当然会减少样式的可重用性，但鉴于小部件通常不会像页面其余部分那样共享相同的结构和设计，应该可以使用更简单的小部件样式来减少类。像（说）

.profile img

肯定会比只选择更好的给那个img类 - 它都立即明显你在做什么，并且很容易在同一时间内维持。

别的东西，你可能想要做的是唯一代码用于特殊情况，像这样很简单情况

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

a.special { 
    color: #B8E9FF; 
} 

a.brilliant { 
    color: #FFAFAF; 
}

此外，删除重复的类，停留每种情况中的相同。再一次，使用级联充分发挥其潜力。

3-5选择符最大值并不少见。 3-5为每其中之一是，虽然。随着更多案例的添加，CSS选择器应该从简单到复杂。因此，请尝试找到小部件的基础，定义默认值，然后编写代码。

代码片段本身也不是不好，除了包含太多和过长的类名。尽管通常会自下而上地进行重新编写优化，如果项目的要求自上次开发者以来发生了变化（我们不再需要支持IE6，欢呼！）但是，如果没有看到结构，就很难制定明确的解决方案。

来源

2010-08-31 16:16:45

诉好点这里 – 2010-09-02 14:16:43

如何简化CSS代码

回答

相关问题