CODEWITHSUNDEEP
css
user2469520
user2469520

Reputation:

Can this CSS code be condensed?

This may be a can of worms that you won't be able to make any sense of. I just wondered if there's a better way of writing CSS styles to avoid the mess I posted below...

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

To help you understand what's going on here, .NoteL and .NoteR are simple divs designed to hold text. .NoteL is floated to the left, .NoteR to the right.

.Cool, .CoolL and .CoolR can contain images, text or both. .Cool is centered, while the others are floated to the left or right. The floated versions also contain divs (class Shadow2) that are offset to give a shadow effect.

Here's an example of a .Cool div containing an image:

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

And here's a .Cool div containing an image and text:

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

The .Note and .Cool series both have other attributes, such as padding and font-size. In the last example, I added the class Fire, changing the default (white background, black text) to a yellow background with red text.

Sorry if I gave you a can of worms, but I just wondered if anyone can see any obvious mistakes I'm making. I know the general rules for writing CSS styles, but I'm a little behind on the latest advances. Thanks.

Upvotes: 0

Views: 91

Answers (2)

Keshav Gupta
Keshav Gupta

Reputation: 41

Your css can be reformatted as below: (used 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 is equivalent to red, and two of your lines had same properties.

Upvotes: 0

SomeKittens
SomeKittens

Reputation: 39532

Your best solution may be to condense this:

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

Into

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

It's more descriptive, as well as easier to find/modify. .CoolL might contain other rules, but you can have multiple classes per element:

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

As a sidenote, I'd recommend you look into newer CSS helpers like SASS and/or LESS.

Upvotes: 3

Related Questions