這個CSS代碼可以被壓縮嗎？

這可能是一堆你無法理解的蠕蟲。我只是想知道，如果有寫CSS樣式，以避免我貼在下面的一塌糊塗一個更好的辦法...這個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浮動到左側，.R到右側。

.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>

的。注意和.Cool一系列兼具有其他屬性，如填充和字體大小。在最後一個例子中，我添加了Fire類，將默認（白色背景，黑色文本）更改爲帶有紅色文本的黃色背景。

對不起，如果我給你一罐蠕蟲，但我只是想知道是否有人可以看到我正在犯的任何明顯的錯誤。我知道編寫CSS樣式的一般規則，但我對最新的進展略有落後。謝謝。

來源

2014-03-29 David Blomstrom

您需要開始使用LESS或SCSS。 –

你最好的解決辦法可能是凝結的：

.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。

來源

2014-03-29 21:51:52 SomeKittens

感謝您的提示;我甚至都不知道LESS和SASS。 –

@DavidBlomstrom沒問題，很高興我能幫到你 – SomeKittens

你的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相當於紅，和你的兩個線有相同的屬性。

來源

2014-03-29 22:09:16

這個CSS代碼可以被壓縮嗎？

回答

相關問題