CSS skills: Modular Coding

Native JS has become simple because of jquery's "write less, do more" and HTML has become concise because of Semantic encoding. Is there a way to make CSS more efficient and exquisite? Of course, that is Modular Coding .
The modularization of CSS can be understood as (or itself) The OOP idea. reusability, flexibility, and scalability are its ultimate goal, and "class" is its core, the general principle of OOP is to use less inheritance. CSS modularization is a novel and efficient CSS encoding method. If you have been familiar with Yui CSS, you will certainly understand this method.
I think this is what everyone really cares about how CSS is modularized. the CSS modularization I understand should be distinguished from the two main parts.
First block, Global modularization from the entire site . This is no stranger to everyone. The often used reset CSS is part of the modularization. We are already familiar with General font styles, link styles, General headers, and subject containers, in addition, such as defining text layout (for example. f12 {font-size: 12px}), positioning (such. TL {text-align: Left}), length height (such. w10 {width: 10px}), margin (such. m10 {margin: 10px}) and other styles that are commonly used in pages. This class is called the CSS generic atomic class (HA, which is related to the class, then the right should be treated as a class ). generic atomic classes have two features: versatility and atomicity. Any page can use them at will, and they only represent the most basic style. A generic atomic class only sets one style, no more points. the overall modularization of the entire site will not be detailed in detail. Later in this article, I will post the General atomic style commonly used in the book "Web Front-end development practices.
Second largest block, Is modularized in terms of visual effects Visually, the style and functions are relatively independent and stable. To split these modules, we should follow the following principle:Try not to include the same part between the module and the module. If there is the same part, the module is split into a separate module. .
Is a simple page visual image I drew:

We can see that cainiao's CSS encoding is generally 1 ~ 4. Define four class names and write their own styles for them. A wise way is to write 1 ~ 4. Define four class names. a. b. c. d {...} define a common style, and then define different styles for each part. However, there is also a perfect way, that is, modularization. the following is a simple modular analysis.
The first step is to analyze the entire visual shared part. We can see that 1 ~ 4. the style of the title background, title text, and content text are the same. Therefore, we can define a class name for the four blocks, write the common style to the Class Name:

 
... <Div class = "box"> <H2> unlucky squirrels go out again </H2> <p> in the 20th century, Fox will translate Ice Age into ice age) another sequencer... </P> </div> <Div class = "box"> <H2> the unlucky squirrel goes out of the mountains again </H2> <p> in the 20th century, Fox will be a selling cartoon "Ice Age" (Ice Age translated from the ice age in mainland China) another sequencer... </P> </div> <H2> unlucky squirrels go out again </H2> <p> in the 20th century, Fox will translate Ice Age into ice age) another sequencer... </P> </div> <Div class = "box"> <H2> the unlucky squirrel goes out of the mountains again </H2> <p> in the 20th century, Fox will be a selling cartoon "Ice Age" (Ice Age translated from the ice age in mainland China) another sequencer... </P> </div>...
 

Step 2: analyze different parts and balance the efficiency. we can see that different parts are mainly the content background color and block width. first, the background color. There are three kinds of background colors: light yellow (1), White (2), and gray (1). Follow the rule "do not include the same part between the module and the module, if there is the same part, the principle of separating a module is removed. We need to propose two white-bottom styles, and the other two are defined separately. Based on the CSS priority principle, we can define the white background to the box style in step 1 by default, and the other two background colors can be redefined. let's take a look at the width and positioning. The width of 2, 4 is the same and both are right floating. Therefore, we can modularize this part, while floating can directly call the generic atomic class. Therefore, we only need to define a width style (if this width is also better in the General Atomic class ). in this case, HTML can be written as follows:

 
... <Div class = "box bg_y"> <H2> unlucky squirrel goes out again </H2> <p> in the 20th century, Fox will translate Ice Age 《 ice Age) another sequencer... </P> </div> <Div class = "box fr right_w"> <H2> the unlucky squirrel goes out of the mountains again </H2> <p> in the 20th century, Fox will be the cartoon 《 ice Age another sequencer... </P> </div> <Div class = "box"> <H2> the unlucky squirrel goes out of the mountains again </H2> <p> in the 20th century, Fox will be a selling cartoon "Ice Age" (Ice Age translated from the ice age in mainland China) another sequencer... </P> </div> <Div class = "box fr right_w bg_g"> <H2> the unlucky squirrel goes out of the mountains again </H2> <p> in the 20th century, Fox will be a selling cartoon. ice Age translated as ice age in the Mainland another sequencer... </P> </div>...
 

This structure may be a little bloated for HTML pages, but the CSS file is greatly reduced because of the increase in reusability.
CSS modularization is a practical concept that needs to be understood. Comprehensive analysis is also required in actual use. Excessive modules will also reduce maintainability, just like OOP programming, we also need to consider "Public attributes" and "Private attributes ".
This article uses a simple example to parse the basic idea of CSS modularization. For more information about CSS modularization, see Yui CSS or other network resources.
do write, less more... CSS can also be implemented.
Appendix: General Atomic classes shared in the book "Web Front-end development practices":

/* Text Layout */. f12 {font-size: 12px }. f13 {font-size: 13px }. f14 {font-size: 14px }. f16 {font-size: 16px }. f20 {font-size: 20px }. FB {font-weight: bold }. FN {font-weight: normal }. t2 {text-indent: 2em }. lh150 {Line-Height: 150% }. lh180 {Line-Height: 180% }. lh200 {Line-Height: 200% }. unl {text-Decoration: underline ;}. no_unl {text-Decoration: none;}/* locate */. TL {text-align: Left }. TC {text-align: Center }. tr {text-align: right }. BC {margin-left: auto; margin-Right: auto ;}. FL {float: Left; display: inline }. FR {float: Right; display: inline }. CB {clear: both }. CL {clear: Left }. cr {clear: right }. clearfix: After {content :". "; display: block; Height: 0; clear: Both; visibility: hidden }. clearfix {display: inline-block} * HTML. clearfix {Height: 1% }. clearfix {display: block }. VM {vertical-align: middle }. PR {position: relative }. pa {position: absolute }. abs-right {position: absolute; Right: 0 }. zoom {ZOOM: 1 }. hidden {visibility: hidden }. none {display: None}/* length height */. w10 {width: 10px }. w20 {width: 20px }. w30 {width: 30px }. w40 {width: 40px }. w50 {width: 50px }. w60 {width: 60px }. w70 {width: 70px }. w80 {width: 80px }. w90 {width: 90px }. w100 {width: 100px }. w200 {width: 200px }. w250 {width: 250px }. w300 {width: 300px }. w400 {width: 400px }. w500 {width: 500px }. w600 {width: 600px }. w700 {width: 700px }. w800 {width: 800px }. W {width: 100% }. h50 {Height: 50px }. h80 {Height: 80px }. h100 {Height: 100px }. h200 {Height: 200px }. h {Height: 100%}/* margin */. m10 {margin: 10px }. m15 {margin: 15px }. m30 {margin: 30px }. mt5 {margin-top: 5px }. mt10 {margin-top: 10px }. mt15 {margin-top: 15px }. mt20 {margin-top: 20px }. mt30 {margin-top: 30px }. mt50 {margin-top: 50px }. mt100 {margin-top: 100px }. mb10 {margin-bottom: 10px }. mb15 {margin-bottom: 15px }. mb20 {margin-bottom: 20px }. mb30 {margin-bottom: 30px }. mb50 {margin-bottom: 50px }. mb100 {margin-bottom: 100px }. ml5 {margin-left: 5px }. ml10 {margin-left: 10px }. ml15 {margin-left: 15px }. ml20 {margin-left: 20px }. ml30 {margin-left: 30px }. ml50 {margin-left: 50px }. ml100 {margin-left: 100px }. mr5 {margin-Right: 5px }. mr10 {margin-Right: 10px }. mr15 {margin-Right: 15px }. mr20 {margin-Right: 20px }. mr30 {margin-Right: 30px }. mr50 {margin-Right: 50px }. mr100 {margin-Right: 100px }. p10 {padding: 10px ;}. p15 {padding: 15px ;}. p30 {padding: 30px ;}. pt5 {padding-top: 5px }. pt10 {padding-top: 10px }. pt15 {padding-top: 15px }. pt20 {padding-top: 20px }. pt30 {padding-top: 30px }. pt50 {padding-top: 50px }. pb5 {padding-bottom: 5px }. pb10 {padding-bottom: 10px }. pb15 {padding-bottom: 15px }. pb20 {padding-bottom: 20px }. pb30 {padding-bottom: 30px }. pb50 {padding-bottom: 50px }. pb100 {padding-bottom: 100px }. pl5 {padding-left: 5px }. pl10 {padding-left: 10px }. pl15 {padding-left: 15px }. pl20 {padding-left: 20px }. pl30 {padding-left: 30px }. pl50 {padding-left: 50px }. pl100 {padding-left: 100px }. PR5 {padding-Right: 5px }. pr10 {padding-Right: 10px }. pr15 {padding-Right: 15px }. pr20 {padding-Right: 20px }. pr30 {padding-Right: 30px }. pr50 {padding-Right: 50px }. pr100 {padding-Right: 100px}

blog published in mr. Think: http://mrthink.net/css-tips-oopcoding/, reprinted please note.