This is equivalent to one more unnecessary rendering....

This is what you take for granted. Do you think browsers are so stupid?

Wouldn’t it calculate the final style before rendering?

Thanks for the invitation~~

Haha, I rolled in the pit and my whole body was covered in mud~~~

When I first started writing css, I just wrote what was needed without considering what the subject said 可复用性、扩展性、命名的规范、目录结构组织 When I wrote it down like this, after one project, css was simply huge

Slowly, I discovered that there are many issues that still need to be considered

Later I started to think about optimizing images, taking into account the css naming convention, taking into consideration the extraction of some repeated styles, and taking into account reuse

Later I started using less and sass to write css. I used css module to process css and also used gulp for compression and packaging

It can be said that I am slowly understanding and optimizing the css style

The hole is still big and needs to be filled slowly

1. Don’t write components yourself. Unless your page is written for fun or for beginners. There are so many components and frameworks in the industry now, feel free to use them.
2. Then you will find that you only need to override the style.
3. The tangled thought of "a few more renderings" should only appear during reconstruction, not the first build. If you think about it for a few days and do nothing before writing, believe it or not, the project manager will hack you to death. Of course, if no one stipulates your construction period, then you can do whatever you want. So don't be mysophobic.
4. After reading your full article, I feel that you are definitely a germaphobe. Just feel free to write. Of course, the necessary folder structure and component splitting need to be studied. Once these are determined for a project, do not change them. Even if they need to be improved, they should be changed in the next project. Otherwise you won’t be able to come up with a project in a year.

We all miss the simple and direct way, but the trend of front-end engineering is unstoppable, with more and more concepts, more and more bloated codes, and more and more complex directory structures. Deploying a front-end environment with webpack is troublesome, and setting up a server with md is just that.

webpack css module?

It is not advisable to work behind closed doors. Go and see how other people's components are written.
For beginners, I generally recommend the bootstrap library. The CSS of this library is very well written. Take a closer look at how its structure is organized.

Only for large projects, small projects have too many files, which is very annoying.

Due to the large number of businesses in large projects, there are countless pages. The modularization and componentization of style files are also for the convenience of management. You can locate the corresponding place to be modified by the file name.

It not only facilitates project management, but also reduces conflicts caused by collaborative development, because each person is only responsible for a single file corresponding to the project.

Moderate is better than too little. If the project really needs to be optimized because of your css, then you can optimize it. Improve your level as much as possible. Let yourself be the best at your own level. Don't pursue something blindly. Know what you want

If you know how to use pre-compiled tools, it is recommended that you take a look at the source code of weui.

Do what you can think of for now and then optimize it slowly