Declaring same CSS class multiple time

Question

haha
haha

This (type 1) seems workable :-

.big_         


        

Answer 1

All three possibilities are allowed. I'd prefer the third for its conciseness.

Answer 2

I prefer hyphenated classes.

This way you could do something like this:

<div class="box-big">haha</div>
<div class="box-small">haha</div>

div[class|=box]{
      /* shared attributes*/
}

.box-big{
    /* stuff */
}
.box-small{
    /* stuff */
}

Answer 3

type 1 is actually very common when declaring multiple classes with some share the same attributes and some have their owned unique attributes. type 2 is a bit dirty to maintain while type 3 is similar to type 1.

it is all works, just a matter of coding style and ease of maintenance

Answer 4

I would use option 3 so that both boxes inherit the class box and then you can define whether that box is small or large.

However, there are a number of ways you can do this but this would certainly be my recommendation.

Answer 5

There is no issue using the first syntax.

It is actually useful, as you noticed to avoid repeating the same time the same styling.

It is also useful to separate the types of styling: positionning, fonts, colors.

You can for instance have in one file the styling that positions the elements and in another file the styling for the colors/backgrounds, allowing you to change the "theme" of your site by just changing the css file responsible for your colors, without breaking the layout itself.

This is for instance what is used in jQuery UI CSS Framework. You have:

• the jquery ui base css
• all the jquery themes files