CODEWITHSUNDEEP
css
ajreal
ajreal

Reputation: 47331

Declaring same CSS class multiple time

<div class="big_box">haha</div>
<div class="small_box">haha</div>

This (type 1) seems workable :-

.big_box, .small_box { border:1px solid #ccc; /* lengthy attributes*/}
.big_box { width:150px; height:150px; }
.small_box { height:140px; width:140px; }

This (type 2) also works :-

.big_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes*/}
.small_box { border:1px solid #ccc; width:150px; height:150px; /* same lengthy attributes* }

Of course, type 2 is lengthy and repeating for most of the common attributes (with same value),
is there any issue for using type 1 ?
(or simply this is allowed ?)

P.S type 3 works too (but I find is hard to manage) ... if 

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

And

.box { border:1px solid #ccc; /* lengthy attributes*/}
.big { width:150px; height:150px;}

Upvotes: 6

Views: 16079

Answers (5)

Christoph
Christoph

Reputation: 51261

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 */
}

Upvotes: 0

vicker313
vicker313

Reputation: 336

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

Upvotes: 9

Chris
Chris

Reputation: 2035

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.

Upvotes: 0

jammon
jammon

Reputation: 3464

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

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30676

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

Upvotes: 4

Related Questions