CSS uses less inheritance and more combinations

Below 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 codeThe Code is as follows: <Div class = "box"> This is a gray box </div>

However, the demand increases at this time. On the page, there must be not only a gray box, but also a blue box, or a green box. Generally we will say that we should use integration, let's make the following changes.
CSS:Copy codeThe 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 codeThe Code is as follows: <Div class = "Box-gray"> This is a gray box </div>
<Div class = "Box-green"> This is a green box </div>

But at this time, the demand has changed. The root and application are different. Some of the boxes use the 12 character, some use the 14 character, and some need to change to the 10 PX character, and some use the 20 PX character, it is estimated that you will have a big head at this time. If you want to inherit the CSS code, it will become very complicated. Then let's test whether it can be solved through combination.
CSS:Copy codeThe 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}

HtmlCopy codeThe Code is as follows: <Div class = "box gray fs-12 pd-20"> This a gray fontsize12px padding20px box </div>
<Div class = "box green fs-14 Co pd-10"> This a gray fontsize14px padding10px box </div>

....
We can see that some of the code and logic are very clear, easy to maintain, and can be freely combined and expanded. From the above, we can see that the "Combination" method is self-evident, but it is not perfect. Do not overdo it when splitting the combination. Otherwise, the effect may be counterproductive, only by applying combination + inheritance can we make our code more elegant and artistic.