I have known about IKEA for a long time, and I went there once when I was in Guangzhou. My impression was that it is big, expensive and smart. The place is big, the things are expensive, and the design is clever. I live not far from IKEA now. I found time to go shopping this month. The place is still so big, the things are still so expensive, and the design is still so clever. Although I didn’t buy anything, I still gained something. Through IKEA’s furniture design methods, we can talk about modularity.
Students who have been to IKEA should have noticed that IKEA furniture is basically modular and removable. The same is true for the characteristics of modularity. It can be combined, relatively independent, and can be easily added when needed. So how can we basically implement this method? Give a simple example:
<div class="mode-a">
<h3>Modular Demo</h3>
<p>Example of modular structure. </p>
</div>
The corresponding CSS can be written like this:
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
Among them, "mode-a" is the name of this module, indicating that this is a module named "a". Now this module can be placed where you need. Since we are making a module, there will not be only one, we add another "mode-b":
<div class="mode-b">
<h3>Modular Demo</h3>
<div>
<h4>Modular features:</h4>
<ul>
<li>Relatively independent</li>
<li>High portability</li>
</ul>
</div>
</div>
The corresponding CSS can be written like this:
.mode-b{...}
.mode-b h3{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
In practical applications, it is often necessary to add some classnames to reduce the complexity of class definitions. This example is relatively simple, but it is enough to illustrate the characteristics of modularity. The above two modules can be used on one or more pages at the same time.
In IKEA stores, you may have noticed that the product areas are basically divided by designers, especially those small items. Modularized code can also be assigned to different people for writing to improve efficiency. Of course, to implement this method, we also need to do some work, such as the naming convention of the module, where interfaces need to be left in the module, etc. As in the above example, it can be agreed that the name starts with "mode" and the module title uses the h3 tag. In this way, no matter who writes the module, it will be compatible with the pages in the project.
Seeing this, you may find that since the fixed structure of the module has been agreed upon above, isn't this part written in the style definition of each module redundant? Yes. If relevant conventions have been formed, this part of the style definition can be proposed and put into the public definition of the project to reduce code redundancy. The above example can become:
/* =S global */
h3{
/* The first way of writing */
...
}
.mode-a h3,
.mode-b h3{
/* The second way of writing*/
...
}
/* =E global */
/* =S mode-a */
.mode-a{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b div{...}
.mode-b h4{...}
.mode-b ul li{...}
/* ==E mode-b */
I wonder if you have noticed that those small items in IKEA can often be combined with different other items. This also brings up another topic of modularity: modules within modules. That is to say, other modules can exist in the module, which is also easy to understand. Just like when we make a website, the structure of the entire page is like a large module, and the example mentioned above is a module within a module, but Let’s narrow this definition down one level. The definition of h3 in the above example can be regarded as a module. It appears in both modules "mode-a" and "mode-b", and its structural performance is relatively fixed.
OK, this is just a definition of a label, what if there is more than one label? Let’s change the example again:
<div class="mode-b">
<div class="mode-a">
<h3>Modular Demo</h3>
<p>Example of modular structure. </p>
</div>
<div class="cont">
<h4>Modular features:</h4>
<ul>
<li>Relatively independent</li>
<li>High portability</li>
</ul>
</div>
</div>
<div class="mode-c">
<div class="mode-a">
<h3>Modular Demo</h3>
<p>This is an example of a "module within a module". </p>
</div>
<div class="cont">
<h4>Modules within modules:</h4>
<p>Module "mode-a" is a module within a module. </p>
</div>
</div>
/* =S mode-a */
.mode-a{...}
.mode-a h3{...}
.mode-a p{...}
/* =E mode-a */
/* =S mode-b */
.mode-b{...}
.mode-b h4{...}
.mode-b .cont{...}
.mode-b .cont ul li{...}
/* =E mode-b */
/* =S mode-c */
.mode-c{...}
.mode-c h4{...}
.mode-c .cont{...}
.mode-c .cont p{...}
/* =E mode-c */
As you can see from the above, "mode-a" is an independent module. When it is part of "mode-b" and "mode-c", it becomes a module within the module. Dropping the bricks, hoping to spark more relevant discussions.