Modular design CSS, more effective management of your Web page

In the content of the site, if you change the content of an area, you may want to change a few CSS. In this way, the original simple modification, began to become complex ...

In the early days of learning CSS, it came into contact with the concept of "modular CSS", however, there has been no good understanding. Say, the reason is very simple: because almost all the code is for the design of the blog, and like a blog so small architecture, CSS file is not much, because the amount of code is small, the use of different forms of page template is not much, less but more convenient management. Therefore, the understanding of modular CSS is very messy, directly lead to their own always think that the following division is very reasonable:

1. RESET.CSS//Reset the default style of the browser
2. LAYOUT.CSS//Manage the layout of the page
3. TYPESET.CSS//Graphic layout and
4. COLOR.CSS//Unified management of color matching
5. PRINT.CSS//Print effect style
6. IE.CSS//separate the hack from IE

In fact, recently work, contacted the company's website, leader to write their own CSS writing specifications, as well as some of the unified Code of HTML, and wrote a new channel/page/store. Only to find that, originally, the above method is still too idealistic. Personally, individuals think that the following segmentation method can be used. First write down, then, let's compare the two methods to find a better solution for CSS file management of the appropriate CSS modular Division method:

1. Reset.css
2. All styles of header.css//head
3. CONTAINER.CSS//except the head/bottom of the middle area style
4. FOOTER.CSS//Bottom style
5. Print.css
6. Ie.css

We can see that there are three different CSS files. The first Division is a good practice, but the management is more troublesome, although it is "modular", the performance of the content of the style of separation. But since no one can understand the content of each CSS file, it may cause the following problems:

I. Efficiency issues and the ultimate goal

In the content of the site, if you change the content of an area, you may want to change a few CSS. As a result, a simple modification was beginning to become complicated. And, if multiple changes are made, it may cause us to ignore something and need further debugging, not only to postpone the end of the goal, but also an efficiency problem.

Second, to invoke as few CSS files as possible

Most buildings, a site is divided into the head, middle and bottom, and, generally, to do new channels/pages and things like that will not change the head and the bottom, but only change the middle part. As a result, all CSS files are invoked because the modularity of HTML and CSS is inconsistent. As a result, the server will suffer more pressure. This is one aspect. Another aspect is that if some elements of the new page conflict with other pages, we might want to do a lot of code on priority selection and increase the amount of code. None of this is what we want. This is why the HEADER.CSS and footer.css to separate the reasons.

Iii. problems in cooperation with many people

If we have more than one person in the work, the Division of labor may be that someone completes the head of the navigation, someone completed the bottom of the search bar, someone completed the middle of the new page construction. As a result, everyone is changing several files at the same time, and changing things differently. If you want to update to the server, you must first contrast, then update. (There is, of course, software that is version management.) However, while working at the same time, the version is also a problem, to believe that perhaps the update will never change. ）

Conclusion:

Of course, the above method is just a simple model. The architecture of different Web sites may require finer-grained methods. Here need to remind of the point is that modular CSS, we should always be clear, we are for the convenience of management, easy to modify, convenient for many people to cooperate, rather than simple segmentation. If there is any suggestion, I think, the modularity of CSS, should try to be consistent with the modularity of HTML. The consensus here is that the modularity of HTML is consistent both in file segmentation and in the segmentation of CSS content. This will be more conducive to our work.

And what do you think of it?