combined multiple classes into one css rule

Question

I\'m trying to do some buckets here and generally I would do 1 class element at a time. That seems silly since classes can share attributes.

HTML

&l         


        

Answer 1

It may even make sense to do something like

<div id = "outerBuckets">
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleFirst">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div>
        <div class = "bucketStyleSecond">
            <div class ="bucketIcon">
                <p></p>
            </div>
        </div> 
</div>

That way you'll only need to say

.bucketStyleFirst {

}

.bucketStyleSecond {

}

This is of course if you'll only be having the two different options.

Answer 2

Use commas to separate the selectors in a list

.bucket1, .bucket2, .bucket3 {
}

.bucket4, .bucket5, .bucket6 {
}

Answer 3

I will try again... (forget the part about posting code...):

"E.g.: <div class = "someclass">... (notice the whitespace before and after =)

...should be: <div class="someclass"> to avoid confusing the browsers.