In order to manage CSS more effectively, Sofish explains the concepts and perspectives of "modular CSS" below. I hope this will be helpful to you.
In the early days of learning CSS, I came into contact with the concept of "modular CSS", but I never understood it well. Speaking of which, the reason is very simple: because almost all the code is for the design of the blog, and for a structure as small as a blog, there is no need to have many CSS files at all, because the amount of code itself is small, and there are not many page templates using different expressions. , less is more convenient to manage. Therefore, my understanding of modular CSS is very confusing, which directly leads me to think that the following division method is very reasonable:
reset.css // Reset the browser's default style.
layout.css //Manage the layout of the page
typeset.css // Graphic and text arrangement and
color.css // Unified management of color matching
print.css //Print effect style
ie.css // It’s not true to separate hacks for IE. I recently worked and came into contact with the company’s website. The leader had to write his own CSS writing specifications, as well as some unified HTML specifications; and he also wrote new channels/pages/stores. . Only then did I realize that the above division was still too idealistic. Personally, I think the following division method can be used. Let’s write it down first, and then, let us compare these two division methods to find a suitable CSS modular division method that better solves CSS file management:
reset.css
header.css // All styles of the header
container.css // Middle area style except header/bottom
footer.css // Bottom style
print.css
ie.css
We can see that there are three different CSS files. The first method of division is a good approach, but it is more troublesome to manage. Although it is "modular", the style of the displayed content is separated. However, since it is impossible for everyone to understand the content of each CSS file 100%, it may lead to the following problems:
1. Efficiency issues and the ultimate goal lie in the content of the website. If the content of a certain area is changed, how many times may it take? Change all CSS. As a result, what was originally a simple modification began to become complicated. Moreover, if multiple changes are made, we may overlook something and require further debugging. This will not only delay the realization of the final goal, but also cause an efficiency problem.
2. Call as few CSS files as possible. In most cases, a website is divided into head, middle and bottom. And, generally, when making new channels/pages and the like, the head and bottom will not be changed. , but only the middle part is changed. In this way, all CSS files must be called, because the modularity of HTML and CSS is not consistent. This will cause the server to bear more pressure. This is one aspect. Another aspect is that if some elements in the new page conflict with other pages, we may have to write a lot of code about priority selection, increasing the amount of code. None of this is what we want. This is why header.css and footer.css should be separated.
3. Problems with multi-person cooperation If there are more than one of us working, the division of labor may be that someone completes the navigation at the head, someone completes the search bar at the bottom, and someone completes the construction of the new page in the middle. In this way, everyone is changing several files at the same time, and the things they change are different. If you want to update to the server, you must first compare and then update. (Of course, there is software such as version management now. However, if you work at the same time, the version is also a problem. You have to believe that maybe updates will never change it.)
Conclusion:
Of course, the above division method is just a simple model. The architecture of different websites may require more detailed classification. One thing that needs to be reminded here is that with modular CSS, we should always be clear that we are here to facilitate management, modification, and collaboration among multiple people, rather than simple division. If I have any suggestions, I think the modularity of CSS should be consistent with the modularity of HTML. The consensus here is that whether it is the division of files or the division of CSS content, it is consistent with the modularity of HTML. This will be more beneficial to our work.
And what do you think?