CSS component thinking_html/css_WEB-ITnose

Why componentization?

Layered design, code reuse, reducing redundancy;

Easy maintenance and good flexibility;

How to componentize?

The code is currently divided into three levels:

1. The first level is the most granular and is the foundation, mainly including font configuration, color configuration, and UI framework (such as MUI or pure.css);

2. The second level is the component layer. Styles that appear twice or more in the project are separated into one component. If there are less than 15 components, they are placed separately in a component.less file. , more than 15 (the limit is determined by yourself), consider putting it in several different less files. Because some styles depend on a certain DOM, you need to write an HTML file for the less file that corresponds one-to-one to the DOM corresponding to the component;

3. Page layer, the remaining styles, one page A less file, not much to say;

Note: In the second article above, there are pros and cons of whether to put the components into one file or separate them. The advantage of storing them separately is that Just @import which component is used, which will not cause code redundancy. The disadvantage is that there are many less files and corresponding HTML files, and the management cost is high. Put the components together. If the components use the namespace in less, it will not cause code redundancy (it is recommended to use the namespace in less), and the cost of managing files is also small.

Use less to achieve modularity

So far, CSS has no modular implementation mechanism. With the help of less, modularization can be achieved.

Mixed functions (the most direct manifestation of reuse);

Nested functions, no longer need to write a bunch of descendants and descendants selectors Yes, after using nesting, the style hierarchy is simple and clear;

The namespace function is a modular tool. With it, we can easily build components without Release redundant things to the global space;

extend syntax, when referencing the style in the imported file, use the extend display indication, which is somewhat similar to extern in C language ;

If you have a better solution, please leave a message to exchange and make progress together.