Question

这可能是一种你无法理解的蠕虫病毒。我只是想知道是否有更好的方法来编写CSS样式以避免我在下面发布的混乱......

.Cool .Caption, .CoolL .Shadow2, .CoolR .Shadow2, .NoteL, .NoteR { background: #fefeee; color: #900; }
.Black, .Black.Caption, .CoolL .Black, .CoolR .Black, .NoteL.Black, .NoteR.Black { background: #000; color: #fff; }
.Blue, .Blue.Caption, .CoolL .Blue, .CoolR .Blue, .NoteL.Blue, .NoteR.Blue { background: #00f; color: #fff; }
.Navy, .Navy.Caption, .CoolL .Navy, .CoolR .Navy, .NoteL.Navy, .NoteR.Navy { background: #009; color: #fff; }
.Red, .Red.Caption, .CoolL .Red, .CoolR .Red, .NoteL.Red, .NoteR.Red { background: #f00; color: #fff; }
.Hot, .Hot.Caption, .CoolL .Hot, .CoolR .Hot, .NoteL.Red, .NoteR.Red { background: #f00; color: #ff0; }
.Cold, .Cold.Caption, .CoolL .Cold, .CoolR .Cold, .NoteL.Cold, .NoteR.Cold { background: #009; color: #fff; }
.White, .Caption.White, .CoolL .White, .CoolR .White, .NoteL.White, .NoteR.White { background: #fff; color: #000; }
.Yellow, .Yellow.Caption, .CoolL .Yellow, .CoolR .Yellow, .NoteL.Yellow, .NoteR.Yellow { background: #ff0; color: #000; }
.Fire, .Fire.Caption, .CoolL .Fire, .CoolR .Fire, .NoteL.Fire, .NoteR.Fire { background: #ff0; color: #f00; }
.Lime, .Lime.Caption, .CoolL .Lime, .CoolR .Lime, .NoteL.Lime, .NoteR.Lime { background: #0f0; color: #000; }
.BGNone, .divCenter.BGNone, .BGNone.Shadow2, .BGNone.Caption, .Cool .BGNone, .CoolL .BGNone, .CoolR     .BGNone, .NoteL.BGNone, .NoteR.BGNone { background: none; }

为了帮助您了解这里发生了什么，.NoteL和.NoteR是设计用于保存文本的简单div。 .NoteL向左浮动，.NoteR向右浮动。

.Cool，.CoolL和.CoolR可以包含图像，文本或两者。 .Cool居中，而其他则向左或向右浮动。浮动版本还包含div（类Shadow2），它们被偏移以产生阴影效果。

以下是包含图片的.Cool div示例：

<div class="CoolL">
  <div class="Shadow2"><img src=""></div>
</div>

这是一个包含图像和文字的.Cool div：

<div class="CoolL">
  <div class="Shadow2">
    <img src="">
    <div class="Caption Fire">Text</div>
   </div>
</div>

.Note和.Cool系列都有其他属性，例如填充和字体大小。在最后一个例子中，我添加了Fire类，将默认值（白色背景，黑色文本）更改为带有红色文本的黄色背景。

很抱歉，如果我给你一罐蠕虫，但我只是想知道是否有人能看到我正在犯的任何明显错误。我知道编写CSS样式的一般规则，但我对最新进展有点落后。感谢。

Answer 1

您最好的解决方案可能是强调这一点：

.Cool .Caption, .CoolL .Shadow2, .CoolR .Shadow2, .NoteL, .NoteR { background: #fefeee; color: #900; }

向

.red-white { background: #fefeee; color: #900; }

它更具描述性，也更容易查找/修改。 .CoolL可能包含其他规则，但每个元素可以有多个类：

<div class="CoolL red-white">
  <div class="Shadow2"><img src=""></div>
</div>

作为旁注，我建议你研究一下较新的CSS帮手，如SASS和/或LESS。

Answer 2

您的css可以重新格式化如下:(使用http://www.minifycss.com/css-compressor/）

.Black,.Black.Caption,.CoolL .Black,.CoolR .Black,.NoteL.Black,.NoteR.Black{background:#000;color:#fff;}
.Blue,.Blue.Caption,.CoolL .Blue,.CoolR .Blue,.NoteL.Blue,.NoteR.Blue{background:#00f;color:#fff;}
.Cool .Caption,.CoolL .Shadow2,.CoolR .Shadow2,.NoteL,.NoteR{background:#fefeee;color:#900;}
.Fire,.Fire.Caption,.CoolL .Fire,.CoolR .Fire,.NoteL.Fire,.NoteR.Fire{background:#ff0;color:red;}
.Hot,.Hot.Caption,.CoolL .Hot,.CoolR .Hot,.NoteL.Red,.NoteR.Red{background:red;color:#ff0;}
.Lime,.Lime.Caption,.CoolL .Lime,.CoolR .Lime,.NoteL.Lime,.NoteR.Lime{background:#0f0;color:#000;}
.Navy,.Navy.Caption,.CoolL .Navy,.CoolR .Navy,.NoteL.Navy,.NoteR.Navy,.Cold,.Cold.Caption,.CoolL .Cold,.CoolR .Cold,.NoteL.Cold,.NoteR.Cold{background:#009;color:#fff;}
.Red,.Red.Caption,.CoolL .Red,.CoolR .Red,.NoteL.Red,.NoteR.Red{background:red;color:#fff;}
.White,.Caption.White,.CoolL .White,.CoolR .White,.NoteL.White,.NoteR.White{background:#fff;color:#000;}
.Yellow,.Yellow.Caption,.CoolL .Yellow,.CoolR .Yellow,.NoteL.Yellow,.NoteR.Yellow{background:#ff0;color:#000;}

#f00相当于红色，你的两条线具有相同的属性。

可以压缩这个CSS代码吗？

2 个答案: