I haven't updated my blog for a long time. A lot of things have happened during this time, and I'm exhausted. But there are still many things I want to do, such as updating merceCSS, sorting out the modular content I have summarized so far and sharing it with everyone, participating in exchange meetings, etc.
I have mentioned modular design a lot, such as " Modularity from IKEA's Furniture Design ", " Modular Thinking in Page Reconstruction ", " Key Points of Component Production in Page Reconstruction " are all related to modularity , but I have never talked about the specific implementation content before, just some thoughts. This time I will focus on the implementation aspect, and I will summarize some of the modularization I have done so far.
To do a good job in modularization , I think it is very important to understand the scope of styles, so this part is the first article in this series.
Students who have written programs should all know that variables have scope (if you don’t know, ask Google yourself, I won’t explain it here). The definition of styles also has scope issues, that is, the scope of the definition. It is easy to understand, such as the scope of p below:
/*作用域：全局*/ p{text-indent:2em;}
/*作用域：.demo这个类中*/ .demo p{color:#000000;}
The priority of style selectors is the basic knowledge of learning styles. Let’s briefly review it:
The rules used are also very simple, that is, the weights of the selectors are added together, and the larger one takes precedence; if the weights are the same, the one defined later takes precedence . Although it is very simple, if you do not pay attention when writing, it can easily lead to repeated definitions of CSS and redundant code.
From the above we can draw two key factors:
What is the use of knowing the weight of the style? For example, it can be used like this: To give the simplest example,
body{color:#555555;}.demo{color:#000000;}
<p>这里的文字颜色受全局定义的影响</p>
<div class="demo"><p>这里的文字颜色受类demo定义的影响</p></div>
<p class="demo">这里的文字颜色受类demo定义的影响</p>
Knowing the weight of the style, you will know how the above example performs. Further application is modularization, such as the examples in " Modularization from IKEA Furniture Design ", please move on for details.