Experience Sharing: CSS and CLASS combination to complete the webpage layout style

I am doing the DIV layout code in this way. I don't know what to say, but I don't know what to say. Let's take a look.
I divide the class into two types: layout class, style class, layout class is skeleton, style class is clothes
For example:
For example, the left column in the layout
First, its attributes include: Left Column, width, background color, font color, etc.
1. First, a class, such as. layout, is defined to control the entire page size.
. Layout {width: 98%; margin: 0 auto; text-align: left ;}
2. Three basic layout classes (l, m, r) will be defined)
. L {float: left}
. M {width: auto}
. R {float: right}
I also classify the two-column layout in the three-column layout, because in the three-column layout, when the width of the left and right columns is 0, the three columns are changed to two columns.
When writing the basic layout code, we 'd better write it in 3 column format.
3. Define the required style Class, such as width, height, and background color, corresponding to the layout Class.
. Class_l {background: # ff0; margin-right:-150px; width: 150px ;}
. Class_m {background: # f00; margin: 0 140px 0 150px ;}
. Class_r {background: # 00f; margin-left:-140px; width: 140px ;}
The layout class has only one set, and the style class can be defined a lot. For example, if you want to make a small 2 column layout in the middle column, you can define another style class.
. Mid_l {background: # ff0; margin-right:-100px; width: 100px ;}
. Mid_m {background: # f00; margin: 0 0 0 100px ;}
4. Combine the layout class and style class to reference the layout class in the code.
<Div class = "l class_l"> </div>
<Div class = "l mid_l"> </div>
The two classes are referenced and separated by spaces in the middle. The layout class is in the front, the style class is in the back, and the space reference can be continued in the back. If special definitions are required, you can define this div with an id.
Some other commonly used style classes can also be written as generic, for example, implicitly can be defined
. Hide {display: none}
When necessary, class = "xxx hide" is very convenient.