CSS modularization (5) One of CSS design patterns principles: Aggregation/combination principles

5. CSS aggregation/Combination Principle-whether to create multiple classes

CSS also contains six principles of the design pattern. Today we will talk about the principle of aggregation/combination-Multi-Purpose Combination and less inheritance.

Assume that the module is 3-1.

Figure 3-1 three simple modules

How do we set its CSS? The solution is shown in the code list 3-11.

Solution 1 can achieve the desired effect, but it is very redundant, ". numberList1 ",". numberList2 "and". the CSS settings of numberList3 are the same. numberList1 li ",". numberList2 li "and". numberList3 li "has some CSS consistency. We improved them to generate solution 2, as shown in code list 3-12.

Code List 3-12 solution 2

In addition to solution 2, there is another idea. solution 3 is shown in code list 3-13.

Code List 3-13 solution 3

Solution 1 regards the three modules in the figure as three classes that are completely different and independent from each other. They are named numberList1, numberList2, and numberList3 respectively, and set styles for them respectively. Its disadvantage is code redundancy. Solution 2 has the same idea as solution 1. modules are still regarded as three classes that are completely different and independent from each other. They just extract the same parts of the three classes using CSS techniques, remove code redundancy. Solution 3 has changed its mind to extract more classes with smaller granularity and implement the design diagram through the combination of classes.

Solution 2 and solution 3 seem to be both good solutions. The advantage of solution 2 is that the call is simple, and only one class is required for one module. solution 3 is a little difficult to use, but it also effectively controls redundancy, simplified code. It seems that both solution 2 and solution 3 are good, but what if we want to achieve the effect shown in 3-11?

According to solution 2, the code is shown in code list 3-14.

The code for solution 3 is shown in listing 3-15.

According to solution 2, we need to define a new class numberList4, which needs to be modified several times in CSS. According to solution 3, we do not need to expand new classes, you only need to re-combine the previously defined classes in the class of the HTML Tag.

In object-oriented programming, there are similar cases: inheritance and combination. The idea of inheritance is to split a complex and variable class into several complex but stable sub-classes. First, define an abstract parent class. The parent class has almost all the methods and attributes. The Child class inherits from the parent class and adds new methods and attributes as needed, overwrite the methods and attributes that change with the parent class. However, if inheritance is used, a new class needs to be defined for any small change, which can easily lead to explosive growth of classes and produce a large number of sub-classes with slight differences. The idea of combination is to divide a complex class into components that are easy to change and relatively stable, and split the components that are easy to change, each possible change is designed as a separate class, and the relatively stable part is designed as a main class. In this way, a complex class is divided into several simple classes, and there is no inheritance relationship between classes. This follows the "single responsibility" principle of object-oriented design. The instances of these easy-to-change classes are assigned to the subject class as an attribute to realize the combination of classes. The combination can greatly reduce the number of classes. In object-oriented programming, a very important principle is "multi-purpose combination, less inheritance ". Some extreme engineers even think that inheritance is wrong and is the culprit of poor maintainability. They advocate full use of combinations and refuse to use inheritance.

Solution 3 refers to the combination of classes in the programming field. It splits the complex numberList1, numberList2, and numberList3 classes in solution 2 into several relatively simple classes, the relatively stable part is split into the numberList class, and the changed part is split into the fl2, fl6, and red classes. Through the combination of classes, it is easy to implement class extension to avoid class explosion.

The class attributes and id attributes of HTML tags are different. Only one id can be attached, and multiple classes can be attached, separated by spaces. For example,

". The HTML class has the same "taste" as the "class" in the program. The class can be mounted multiple times and technically supports the "Combination" usage. When we use css, if we can use it flexibly, We can greatly reduce the number of classes. On the one hand, we can reduce the amount of code and improve the maintainability. On the other hand, we can make the class more single and more elastic, this increases the reusability of classes and increases the development efficiency.

Will hanging multiple classes make HTML tags look too bloated? Is this really good? Although it is difficult to look at bloated, the benefits it brings cannot be ignored. I suggest hanging multiple classes, even if it makes HTML tags look less lightweight. Some code in Yahoo's YUI3 official demo is shown in code list 3-16.

Code List 3-16 class in YUI3

It can be seen that Yahoo's front-end development engineers also like to use multiple classes.