이 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가 무엇인지 여기에 무슨 이해를 돕기 위해 ... 궁금 . 노트는 왼쪽으로, 노트는 오른쪽으로 플로트됩니다.

.Cool, .CoolL 및 .CoolR에는 이미지, 텍스트 또는 둘 다를 포함 할 수 있습니다. 다른 하나는 왼쪽 또는 오른쪽으로 떠있는 반면, 쿨은 중앙에 배치됩니다. float 버전은 그림자 효과를주기 위해 오프셋 된 divs (클래스 Shadow2)도 포함합니다. 여기

은 이미지가 포함 된 .Cool의 DIV의 예 :

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

을 그리고 여기에 이미지와 텍스트가 포함 된 .Cool의 사업부입니다 : 모두

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

, 나는 당신이 SASS 및/또는 LESS 같은 새로운 CSS 도우미 들여다 권하고 싶습니다.

Answer 2

귀하의 CSS는 다음과 같이 포맷 할 수 있습니다

.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 빨간색에 해당하고 선 두 사람은 같은 속성을 가지고 (http://www.minifycss.com/css-compressor/를 사용).