Exploration of reusable CSS writing

In the process of building css, we often define certain attributes, which are used in multiple places. Such as font size and color. So how can we maximize reuse?
This section describes how to use these two attributes (font size and color. For example, we need to define a section in red with a font size of 14px.
This is usually possible:
Html:
<P class = "paragraph"> This is a section in red with a font size of 14px. </p>
Css:
. Paragraph {
Font-size: 14px;
Color: red
}
Effect:

This is a section in red with a font size of 14px.

When we have another paragraph or several paragraphs with the same attributes: red, and the font size is 14px, we only need to define the same class in html to implement it easily.
Html:
<P class = "paragraph"> This is another section in red with a font size of 14px. </p>
Effect:

This is another section in red with a font size of 14px.

However, when there is a paragraph in blue with the same font size as 14px, We have to redefine a style.
Html:
<P class = "paragraph_another"> This is a section in blue with a font size of 14px. </p>
Css:
. Paragraph_another {
Font-size: 14px;
Color: blue
}
Effect:

This is a section in blue with a font size of 14px.

Obviously, the font is 14px. So how can we reuse this style?
I did this: introduce a technology that I call "class concatenation" (This method has been used for a long time, but it is just what I call it ).
First, define a style with a font size of 14px.
. Font_one {
Font-size: 14px;
}
Then define your own style:
Paragraph {
Color: red
}
Paragraph_another {
Color: blue
}
In hmtl, we apply the following:
<P class = "paragraph font_one"> This is another section in red with a font size of 14px. </p>
<P class = "paragraph_another font_one"> This is a section in blue with a font size of 14px. </p>
Effect:

This is a section in red with a font size of 14px.

This is a section in blue with a font size of 14px.

Similarly, we can splice other styles, such as bold fonts.
Create a css
. Font_a {
Font-weight: bold;
}
Html:
<P class = "paragraph font_one font_a"> This is another section in red with a bold font size of 14px. </p>
<P class = "paragraph_another font_one font_a"> This is a blue section with a bold font size of 14px. </p>
Effect:

This is a section in red, bold, and 14px font size.

This is a blue section with a bold font size of 14px.

In this way, in other paragraphs, you only need to splice the corresponding class name in the html code.
Advantages of this method: in the construction of the page project, the speed can be greatly improved, the global modification is flexible, and the volume of css files is reduced.
Disadvantages: Some styles are not flexible. When you modify them, you need to delete the corresponding class name in the html code, or add a unique identifier, and then write a new style into the unique identifier, overwrite the old one.

When you modify one or two places, it is still feasible. When there are a large number of places to be modified, it is obviously not feasible.

For example, how can I achieve this?

This is another section in red, bold, with a font size of 14px. Identifier: paragraph

This is a blue section with a bold font size of 14px. Identifier: paragraph_another

This is a section that only needs to be bold and the font size is 14px. Identifier: paragraph_a

This is a red section with no bold characters and a 12 PX font size. Identifier: paragraph_ B

This is a bold section with a font size of 12 PX. Identifier: paragraph_c

Method 1: Differences:
Css:
. Garagaraph,
. Garagraph_another,
. Paragraph_a {
Font-size: 14px;
Font-weight: bold
}
Then define:
. Garagraph,
. Paragraph_ B {
Color: red;
}
. Garagraph_another {
Color: blue
}
. Paragraph_c {
Font-weight: bold;
}
Html:
<P class = "paragraph"> This is another section in red, bold, and with a font size of 14px. Identifier: paragraph </p>
<P class = "paragraph_another"> This is a section in blue with a bold font size of 14px. Identifier: paragraph_another </p>
<P class = "paragraph_a"> This is a section only in bold and with a font size of 14px. Identifier: paragraph_a </p>
<P class = "paragraph_ B"> This is a red section with a font size of 12 PX. Identifier: paragraph_ B </p>
<P class = "paragraph_c"> This is a bold section with a font size of 12 PX. Identifier: paragraph_c </p>
Method 2: reserve a Back PathThat is, when splicing a class, it also sets a unique identifier. When you need to modify the identifier, add a new style or overwrite an unwanted style, without modifying the html.
Css:
. Font_size_one {
Font-size: 14px;
}
. Font_weight_a {
Font-weight: bold;
}
. Color_one {
Color: blue
}
. Color_two {
Color: red;
}
Html:
<P class = "color_two font_weight_a font_size_one paragraph"> This is another section in red, bold, and with a font size of 14px. Identifier: paragraph </p>
<P class = "color_one font_weight_a font_size_one paragraph_another"> This is a blue section with a font size of 14px. Identifier: paragraph_another </p>
<P class = "font_one font_weight_a paragraph_a"> This is a section only in bold and with a font size of 14px. Identifier: paragraph_a </p>
<P class = "color_two paragraph_ B"> This is a red section with a font size of 12 PX. Identifier: paragraph_ B </p>
<P class = "font_weight_a paragraph_c"> This is a bold section with a font size of 12 PX. Identifier: paragraph_c </p>
Why is the name not semantic? For example: color_two {color: red} (the font is red) can be named color_red {color: red?
I think that if the color is changed to blue {color: blue}, the color_red is obviously not logical.

What method should we use in practical applications? Welcome to the discussion!