css - 这段 CSS 代码可以压缩吗？

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居中，其他的则向左或向右浮动。 float 版本还包含偏移以提供阴影效果的 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 系列都有其他属性，例如padding 和font-size。在最后一个示例中，我添加了 Fire 类，将默认设置(白色背景，黑色文本)更改为黄色背景和红色文本。

很抱歉，如果我给了你一 jar 蠕虫，但我只是想知道是否有人能看出我正在犯的任何明显错误。我知道编写 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 .