Use standard parts to assemble web page DIV layout-WEB standard website design experience_CSS/HTML

I have an idea like this, but I don’t know if it’s feasible

Example:
The left column in the layout has the following attributes: {Left, width, background color, font, etc.}
If each attribute is made into a standard part, and then assembled and used like this
class="float width height background font padding....", complete the page layout style by referencing the standard parts of multiple classes
First define the standard parts as needed, such as:

float standard parts
.l{float:left}
.r{float:right}
.cl{clear:left}
...

width standard parts
.w200{width:200px}
.w300{width:300px}
...

Background standard parts
.red{background:red}
.black{background:#000}
.white{background:#fff}
...
Cite as necessary
class="l w200 red"[left, width 200, background red]
class="r w200 white" [right, width 200, background white]

I now write my own code and can define a layout style with up to 2 classes, which feels very convenient