inheriting from another css class

Question

I have a problem here that i can't seem to figure out, till now my css has been a little slapdash and it was always a case of hack away till it looks right but i've decided to learn it properly and i'm trying to categorize things as much as i can.

So i have a layout that has an unordered list, this list has three li tags, within each of these li tags are two div each.

Now i have a class for each of these containers, they can be called container_1 container_2 and so on.

Now they have some unique attributes to each of them but they al also follow a set style for example, the divs in each li are side by side so its sets of two divs also they are all going to have round corners.

So i thought i could make a class class rounded_corners plus float_left and float_right so instead of re typing the code to round the corns or float something i could just reference thing class like this:

.container_1 .rounded_corners .float_left
{

}
 .container_2 .rounded_corners .float_right
{

}

But when i use this i loose my styling so i used a comma and this allowed the sty;ing for the div to come back but the corners and floats didn't work.

So where am i going wrong with this?

This is my code, i have taken the code out that breaks the layout, but if you remove the comments you can see what happens.

http://jsfiddle.net/ragebunnykickass/g3Zaz/

The naming is a little different but you'll know what is meant.

Thanks.

Just for future reference: Class names based on how things look are not recommended. Class names based on what things represent are much better. — Ryan Kinal
– Ryan Kinal, Commented Oct 24, 2012 at 15:07
@RyanKinal Thanks for the tip buddy, these names are just for test purposes at the moment, usually i am very strict with naming (It's the one thing i am strict with haha) — ragebunny
– ragebunny, Commented Oct 24, 2012 at 15:09

Adriano Repetti · Accepted Answer · 2012-10-24 15:30:48Z

16

CSS classes cannot inherit so what you have to do is split them to be as much atomic as possible. For example if you have a rounded-corners class and it may be applicable to containers:

.rounded-corners
{
   /* Your CSS to define rounded corners */
}

Note that you define ONLY the properties for rounded corners. Now let's say you have a class to style containers (for example with a proper padding):

.container
{
    /* Your CSS to define a nice container */
}

How to combine them together? This won't be done in CSS but in HTML, in this example this <div> inherits from both container and rounded-corners:

<div class="container rounded-corners">
</div>

Now suppose you need rounded corners for a non container object:

<div class="rounded-corners">
</div>

This is how CSS works. Do not compare them (because of name) with classes of object oriented languages. Each class define a set of attributes that will be applied to all elements that belong to that class. Final element style is the composition of the attributes inherited from each class that element belongs to.

NOTE: to summarize: answer is yes, you may have to repeat some code. You'll have trouble to manage your code (both HTML and CSS) if you use classes as short names for a style: you'll see you missed the point to separate content from style (because in HTML you'll define, using a class like rounded-corners, an explicit appearance). Imagine: next month you have to change your web-site style and fashion requirements impose you have square corners. You have to change your HTML code (unless you accept to have a rounded-corners class to apply a squared border). Much better if you simply say container and you let your CSS to define (and know) how a container should be rendered.

It may be applicable to you or not (it depends on your preferences, taste and development environment) but you may take a look to LESS. It's implemented as a JavaScript that will parse your CSSs. Of course you won't write a pure valid CSS but you'll gain many new features. In your case you may find mixins are what you need:

.rounded-corners
{
    /* Your CSS here */
}

.float-left
{
    /* Your CSS here */
}

.container
{
    .rounder-corners
    .float-left
}

edited Oct 24, 2012 at 15:30

answered Oct 24, 2012 at 14:58

Adriano Repetti

67.5k20 gold badges144 silver badges215 bronze badges

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

4 Comments

ragebunny Over a year ago

I see, i think i am struggling to change my way of thinking of classes, i am used to using OO languages. As far as the last note, are you saying that using a class with a name such as rounded_corners is bad because it doesn't explain what the class is is i end up just using class="rounded_corners" ?

ragebunny Over a year ago

Maybe something like market_card_boder_style would explain things a lot more.

Adriano Repetti Over a year ago

@ragebunny no, it's not because of the meaning. Try to answer: if, for example, cellpadding attribute is considered evil (because you mix content with style in HTML) then why rounded-corners should be better? You write in HTML something about appearance too. "container" is good (you say it's a container, you don't ask how it should be rendered). I added a small example about LESS, take a look to it.

ragebunny Over a year ago

Thanks a lot for the that answer, it has really help me out! I will have a look at LESS. Thanks again.

jaco · Accepted Answer · 2012-10-24 14:56:44Z

0

You could have a CSS code like:

.container_1 {

}
.rounded_corners {

}
.float_left {

}

and then set a class to HTML element in this way:

<div class="container_1 rounded_corners float_left">...</div>

So the DIV element will inherit every style of every class! Obviously, DIV it's just an example, you could use every tag!

answered Oct 24, 2012 at 14:56

jaco

3,5265 gold badges28 silver badges43 bronze badges

Comments

Thai · Accepted Answer · 2012-10-24 15:00:58Z

0

If i get it well, you want a set of classes to apply to each div?

I'd break it up like that :

css

.rounded_corners {}
.float_left {}
.float_right {}
.container {}

and in the html

<li id="container_1" class="container float_left rounded_corners">...</li>
<li id="container_2" class="container float_right rounded_corners">...</li>

etc...

answered Oct 24, 2012 at 15:00

Thai

495 bronze badges

3 Comments

ragebunny Over a year ago

So there i no way of me using the rounded_corner class with my container class in the css sheet?

ragebunny Over a year ago

There is no tidier way of doing this, because putting multiple classes into the class attribute in the html seem so messy to be and you are always told to make things as clear and clean as possible.

Thai Over a year ago

well you could put the 'rounded_corners' properties in the 'container' class, if all your containers have this property

Collectives™ on Stack Overflow

inheriting from another css class

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related