Combining Classes in the CSS File

[robzilla]

One of my sites in development currently has a CSS file that's over 11KB large, so I'm looking for ways to optimize it. I know you can combine classes, like this:

<div class="container blue">example</div>

However, I was told there's another way of combining classes. It seems to work, but I'm worried there could be negative effects, even though I don't see any (haven't tested in all browsers). Here's an example.

Instead of doing this..

.header { float: left; width: 500px; background-color: pink; color: #000; }
.content { float: left; width: 300px; background-color: red; color: #000; }
.footer { float: left; width: 400px; background-color: purple; color: #000; }

..you do this:

.header { width: 500px; background-color: pink; }
.content { width: 300px; background-color: red; }
.footer { width: 400px; background-color: purple; }
.header, .content, .footer { float: left; color: #000; }

In this example, you don't save a lot of bytes, but I assume you get the point.

I was initially worried the latest definition of a class would cause the previous to be ignored, but this doesn't seem to be the case.

[Robin_reala]

The comma means "start a new selection". So in this case:

.header, .content, .footer

Says "select all elements of class header, all of class content and all of class footer, and apply the following rules to them". It's an important way to cut down on CSS file size.

[robzilla]

Indeed. However, with this method, you define a class twice, as you can see in the third example above. Is that acceptable/normal?

[moltar]

Yes, that's the whole point behind the "Cascading" of CCS. You want to minimize repetition by all means possible.

[Robin_reala]

You're not 'defining a class'. The first part of your statement is known as a selector - it 'selects' from the document. By writing '.header' you say 'select everything with a class of header from the document'. If you select it again later then that's not a problem.

[robzilla]

Ah I see. Thank you! :-)

[crosswalker21]

If you're worried about styles overiding previous ones, you could always put the comma sepparated list of selectors with its properties(sorry if this is the wrong term, I mean the things in between {}) above the individual selectors and their properties. This way, the CSS will worry about the general styles first and the more specific ones later.

sort of like this:

.header, .content, .footer {float: left; color: purple;}
.header {width: 500px; background-color: pink;}
.content {width: 300px; background-color: red;}
.footer {width: 400px; background-color: purple;}

[robzilla]

I ran into that problem yesterday, crosswalker21, and that is indeed how I fixed. I couldn't really find the problem though. No class elements were overwritten so it should've worked fine, but it didn't.

I tested this optimization method on one of my running sites and I managed to cut off 1KB off of a 3kb stylesheet - 30%!

[londrum]

the 'universal selector' is pretty handy too. for example:

*{margin:0;padding:0}

means that every single element will have margins and paddings set to 0.

and

*.blue{color:blue}

means that every single element with a class="blue" -- no matter what kind of element it is -- will be the color blue.

and if you have a big CSS sheet, it is surprising how many bytes you can save just by removing whitespace and the extra colons at the end. using yours as an example, instead of

.header { float: left; width: 500px; background-color: pink; color: #000; }

you could just write

.header{float:left;width:500px;background:pink;color:#000}

[moltar]

There are also CSS optimizers. Look in your favourite SE. You can save additional 10-30% without killing the readability, and up to 50 with removing new lines, spaces and other useless characters.