题
我正在与现有的片的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>
解决方案
根据所述张贴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
代替。
其他提示
以下只是评论;很难给出确切答案,这样的问题,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中,级联保证继承,所以添加前缀过你所有的类名仅仅是必要的。当然,如果你已经得到了点的索引的类名,它的时间来交换他们出去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选择max是不寻常。 3-5 每个的其中之一是,虽然。该CSS选择器按理应该从简单到复杂,随着越来越多的情况下被添加。因此,尝试寻找小部件的基础上,定义了默认值,代码的方式了。
代码片段本身是没有的太的只是包含了太多,过于长的类名的坏。从下往上重写虽然常可导致优化,ESP。如果自上次开发项目的要求发生了变化(我们并不需要支持IE6了,万岁!)但同样,没有看到结构很难作出明确的解决方案。
如果它只是四个按钮,我会拉向上翻页在现代浏览器和使用开发工具包(Firefox中的Firebug,蜻蜓在Opera,Safari /铬WebKit的开发者工具)来检查有问题的按钮看到有效的风格是每个什么。
您可能想我读不走了过来太长回来,它具有亲的的一个很好的概述和反对的组织你的CSS的。我也想看看它有一些链接到一些更多信息,文章的底部。
这东西看起来小部件的样式似乎去与classitis有点过分,但至少它的文档,我不能指望的次数我见过无证CSS类。
我认为你需要改变你的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>
,其中每个类改变元件上的东西具体(即左=>浮动:左)。他们有一样的一个类库,他们总是使用。