Use less inheritance and more combination in CSS_Experience exchange

The following is a common code:
css:

Copy code The code is as follows:

.box{
border:1px solid #ccc;
font-size:12px;
background:#f1f1f1;
padding:10px;
}

html:

Copy code The code is as follows:

this is a gray box

But at this time the demand has increased. There must be not only a gray box on the page, but also a blue box, and maybe a green one. Usually we would say to use integration, so let’s make the following changes
css:

Copy code The code is 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 The code is as follows:

this is a gray box

this is a green box

But this time the needs have changed again. The roots are different from the applications. Some of the boxes need to be used. Size 12 fonts, some need to use size 14 fonts, some need to be 10px and some need 20px. It is estimated that your head will be big at this time. If you want to use inherited css code, it will become extremely complicated, then let's experiment Let's see if we can solve it through a combination of methods.
css:

Copy code The code is 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 The code is as follows:

this a gray fontsize12px padding20px box

this a gray fontsize14px padding10px box

div>
….
Let’s look at some of them. Although a few are referenced on the class, the code and logic are very clear, and they are very easy to maintain. They can be combined and expanded at will. As you can see from the above, the method of "combination" is self-evident, but it is not perfect. When splitting the combination, be sure not to overdo it, otherwise the effect may be counterproductive. Only by using combination inheritance appropriately can our code More elegant and artistic.