如何在css中继承类

Question

I wrote few css classes such as these:

.bad
{
    background:#fff0f0;
    color:#800;
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good
{
    background:#eeffee;
    color:#008800; 
    width:1024px;        //same as above
    padding-left:10px;   //same as above
    margin-top:0;        //same as above
    margin-bottom:0;     //same as above
}

As you see out of 6 attributes, 4 are exactly same. So I thought of avoiding this duplication by writing a .common class and inherit them when defining the above classes, as shown below:

.common
{
    width:1024px;
    padding-left:10px;
    margin-top:0;
    margin-bottom:0;
}
.good, .common    //inherit .commom
{
    background:#eeffee;
    color:#008800;
}
.bad, .common     //inherit .commom
{
    background:#fff0f0;
    color:#800;
}

But these change doesn't produce the same effect on the browser. I'm applying them on <p> tags and I see a gap between two consecutive <p > tags in the latter case. So it seems margin-* attributes are not inherited (or doesn't work the way it works in the first case).

All I'm looking for a way to avoid code-duplication. Is there any way to achieve that?

I'm not allowed to use less or any external tool or library. I just want my code to look shorter and concise in native CSS which I can put in the html file itself (no external .css file). I'm allowed to use javascript in the html itself (no jquery though).

Answer 1

Using HTML you can inherit the other classes properties. You need to apply in your paragraph like this.

<p class="good common">Some Text</p>
<p class="bad common">Some new Text</p>

Need to update your CSS like below.

.common
{
width:1024px;
padding-left:10px;
margin-top:0;
margin-bottom:0;
}
.good
{
background:#eeffee;
color:#008800;
}
.bad
{
background:#fff0f0;
color:#800;
}

Explanation :

First I will show you want your current structure is doing. Check this fiddle http://jsfiddle.net/FeyLJ/ . Now you can see the margin between two paragraph. So As of your thinking it will not inherit anything from CSS. So need to add the common class to your paragraph. Like

 <p class="good common">My Smaple Text</p>
 <p class="bad common">My another Simple Text</p>

After adding this see the fiddle http://jsfiddle.net/FeyLJ/1/ what effect you got it? Now the margin issue gone. But did you notice that it produce one more issue. Yes both the paragraph now apply the same color background. Why? In CSS if you use the same class with same properties two times then it will take properties from the last defined place. In this case it is taken the same bad class background for both.

For your clarification move the order of the class like below.

.bad, .common 
{
background:#fff0f0;
color:#800;
} 

.good, .common 
{
background:#eeffee;
color:#008800;
}

This time it will apply the green color background instead of pink color. I hope you understand what order is doing here. So it will not inherit anything and why you need this? We can take out the common class. So Whereever we want, we can just use multiple classes like my answer above.

Here is the fiddle with my answer.

Answer 2

.bad, .common //inherit .commom doesn't do what you think, it sets styles to both, to .bad and .common elements.

If you have both classes on each element, you can use that.

<style>

.common {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="common bad">bad</p>
<p class="common good">good</p>

If you have just one class, bad and good on each element, use that

<style>

.bad, .good {background: #fff0f0; color: #800; width: 1024px; padding-left: 10px; margin-top: 0; margin-bottom: 0;}
.good {background: #efe; color: #080; }

</style>
<p class="bad">bad</p>
<p class="good">good</p>

Answer 3

你应该写一个BaseClass并在你的标签中引用它：

<p class="MyBaseClassForP ExtraClass AnotherExtraClass">text</p>