Modular CSS-more effective CSS Management

ArticleDirectory

• I. efficiency issues and ultimate goal
• Ii. Call as few CSS files as possible
• Iii. multi-person cooperation issues
• Conclusion:

Edit comment: when designing CSS for a website, the modular CSS method can be used to manage CSS more conveniently. Code And facilitates multi-person cooperation.

At the beginning of CSS learning, I came into contact with the concept of "modular CSS". However, I have never understood it well. The reason is simple: because almost all the code is designed for a blog, there is no need for many CSS files for a small architecture like a blog, because the amount of code is small, there are not many page templates with different forms, but they are easier to manage. Therefore, the understanding of modular CSS is messy, which directly leads you to think that the following method is very reasonable:

1. Reset.css // reset the default style of the browser
2. Layout.css// Manage the page layout
3. Typeset.css// Orchestration and
4. Color.css// Unified Color Management
5. Print.css // print the effect Style
6. Ie.css // separate the hack of IE

In fact, this is not the case. Recently, leader came into contact with the company's website. Leader had to write CSS writing standards and some HTML uniform standards on his own, and wrote new channels, pages, and stores. It turns out that the above method is too idealistic. In my personal opinion, we can use the following segmentation method. First, write down, And then, let's compare the two methods to find a better solution to CSS file management's appropriate CSS modular method:

1. Reset.css
2. Header.css// All styles in the header
3. Container.css// The middle area style except the header and bottom
4. Footer.css// Bottom style
5. Print.css
6. Ie.css

We can see that there are three different CSS files. The first method is a good practice, but it is difficult to manage. Although it is "modular", the style of the content is separated. However, since it is impossible for everyone to fully understand the content in each CSS file, the following problems may occur:

I. efficiency issues and ultimate goal

On the website content, if you change the content of a certain area, you may need to change several CSS items. In this way, a simple modification becomes complicated. In addition, if we modify multiple items, we may ignore some things and need further debugging. This will not only delay the implementation of the final goal, but also cause efficiency problems.

Ii. Call as few CSS files as possible

In most situations, a website is divided into the header, the middle and the bottom. In general, it will not change the header and the bottom to do new channels/pages, it is only the middle part of the change. In this case, all CSS files must be called, because the modularization of HTML and CSS is inconsistent. In this way, the server will be under more pressure. This is an aspect. On the other hand, if some elements on the new page conflict with other pages, we may need a lot of code on priority selection to increase the amount of code. These are not what we want. This is the reason why header.css and footer.css should be separated by others.

Iii. multi-person cooperation issues

If many of us are working, the division of labor may be that someone has completed the navigation of the header, someone has completed the search at the bottom, and someone has completed the construction of the new central page. In this way, everyone is changing several files at the same time, and the changes are different. If you want to update to the server, you must first compare and then update. (Of course, software such as version management is now available. However, if you work at the same time, the version is also a problem. You need to believe that the updates may never change .)

Conclusion:

Of course, the above method is just a simple model. Different website architectures may require more detailed differentiation. One thing to note here is that we should always be clear about modular CSS to facilitate management, modification, and cooperation, rather than simple division. If there are any suggestions, I think the modularization of CSS should be consistent with the modularization of HTML as much as possible. The consistency here is that, in terms of file splitting or CSS content segmentation, it is consistent with the modularization of HTML. This will be more conducive to our work.