Declaring same CSS class multiple time

Question

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

oh, really? Cause I have the impression like declaring same class is not allowed in programming — ajreal
– ajreal, Commented Feb 24, 2012 at 14:40
Thats just not how css works. It's supposed to cascade. Notice though, that you're not even redeclaring the same selector multiple times .big_box, .small_box is a different selector than .big_box. But it'd be fine if you had. — Joe Flynn
– Joe Flynn, Commented Feb 24, 2012 at 14:45
FYI: What you call attribute is actually property. CSS property. Pair of property and its value is called declaration. — Marat Tanalin
– Marat Tanalin, Commented Feb 24, 2012 at 16:02

vicker313 · Accepted Answer · 2012-02-24 14:42:27Z

9

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

answered Feb 24, 2012 at 14:42

vicker313

3362 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Didier Ghys · Accepted Answer · 2012-02-24 14:41:02Z

4

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

answered Feb 24, 2012 at 14:41

Didier Ghys

30.6k9 gold badges77 silver badges82 bronze badges

Comments

jammon · Accepted Answer · 2012-02-24 14:41:08Z

1

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

answered Feb 24, 2012 at 14:41

jammon

3,4643 gold badges23 silver badges30 bronze badges

Comments

Chris · Accepted Answer · 2012-02-24 14:41:20Z

0

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.

answered Feb 24, 2012 at 14:41

Chris

2,0461 gold badge21 silver badges45 bronze badges

1 Comment

ajreal Over a year ago

i actually need the dimension to be different

Christoph · Accepted Answer · 2012-02-24 14:44:01Z

0

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

answered Feb 24, 2012 at 14:44

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

1 Comment

ajreal Over a year ago

Is this consider as an expression? div[class|=box]

Collectives™ on Stack Overflow

Declaring same CSS class multiple time

5 Answers 5

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related