Here's a general code:
Css:
Copy Code code as follows:
. box{
border:1px solid #ccc;
font-size:12px;
Background: #f1f1f1;
padding:10px;
}
Html:
Copy Code code as follows:
<div class= "box" >this is a gray box</div>
But this time the need for more, in the page not only to have a gray box may have a blue box, may also have green, usually we will say with integration, well we will make the following changes
Css:
Copy Code code as follows:
. Box-gray,
. box-green{
border:1px solid #ccc;
font-size:12px;
padding:10px;
}
. Box-gray{background: #f1f1f1}
. Box-green{background: #66ff66}
Html:
Copy Code code as follows:
<div class= "Box-gray" >this is a gray box</div>
<div class= "Box-green" >this is a green box</div>
But this time the demand has changed again, the root and application of the different, some of the box to use the word 12th, some to use the word 14th, some to change the 10px some to 20px, it is estimated that this time you will be the head of the big, if you want to use the inheritance of CSS code will become unusually complex, Then we'll try to see if we can solve them in a combination.
Css:
Copy Code code as follows:
. fs-12{font-size:12px}
. fs-14{font-size:14px}
. pd-10{padding:10px}
. pd-20{padding:20px}
. box{
border:1px solid #ccc;
}
. Box.gray{background: #f1f1f1}
. Box.green{background: #66ff66}
Html
Copy Code code as follows:
<div class= "box Gray fs-12 pd-20 >this fontsize12px a gray padding20px box</div>
<div class= "box green fs-14 pd-10 >this fontsize14px a gray padding10px box</div>
....
We look at some of the classes that are referenced, but the code and logic are very clear, and very easy to maintain, arbitrary combination of arbitrary expansion. From the above you can see the "combination" of the way is self-evident, but is not perfect, and then split the combination of the time must not be excessive, or the effect may backfire, only the combination of the right to use the inheritance to make our code more elegant and artistic.
