On the reasonable structure of CSS

Schema CSS

In the current browser generally support the premise, CSS has been given to us an unprecedented mission. However, the more CSS you rely on, the bigger and more complex your stylesheet files become. At the same time, the test of document maintenance and organization will follow.

As long as a CSS file is enough-all rules (rule) together, adding and deleting changes are very convenient-but this day has long gone. When building a new website, it takes time to plan how to organize and structure CSS.

Organization of documents

The first step in building a CSS system is the elaboration of the outline. (I think) CSS organization planning is as important as the site directory structure. (Note: Use a little exaggeration to deepen your memory) there is no solution universal, so we will discuss some basic organizational scenarios and their respective pros and cons.

Master CSS File

You can usually use a master CSS file to place the rules for all page shares. This file will contain default fonts, links, headers, and other styles. With the master CSS file, we began to explore advanced organizational strategies.

Method One: Based on prototype

The most basic strategy is to detach the CSS file based on the prototype page (archetype pages). If a site's home page, subpages and combination page design is different, you can adopt a prototype based strategy. (under this strategy) each page will have an exclusive CSS file.

In the case of a small number of prototypes, this method is straightforward and effective. However, the problem arises when page elements are not step-by-step in each prototype page. What should we do if the subpages and the combined pages share some elements and the home page doesn't?

Put the shared elements into the main CSS file. This is not the purest solution, but it applies to specific situations. But if the site is huge, the main CSS file expands quickly--which violates the original intent of separating the files: Avoid importing unnecessary large files.

Put a style code in a CSS file that combines pages and subpages. This means maintaining redundant code, which we obviously don't want to do.

Create a new file that is shared by both of these pages. That sounds good. But if there are only 10 lines of code, we create this file just to share the 10 lines of code? (Note: Overkill?) This approach is pure, but if the site is huge and there are a lot of things to share a few elements of the page (note: For example, 30 pairs of pages to share 10 lines of code), it seems very cumbersome.

Create a separate CSS file that contains the styles for all shared elements. This method may be simpler, depending on the size of the site and the number of shared elements. A situation can be annoying: Import a large CSS file, but the page uses only a small number of styles-or that sentence, which violates the original intention of the separation of files.

This is what I call an overlapping dilemma (overlap dilemma). Fragmented CSS rules overlap and do not have a completely clear and unambiguous solution to organize them.

Method two: Based on page elements/blocks

This is good if the Web site uses server-side include. For example, if you use the header include, it will have its own corresponding CSS file. The footer or other part of the include can do the same, just import your own CSS file. This method is simple and clean, but it may produce many small CSS files.

For example, if the footer style requires only 20 lines of CSS code, creating a single file will not work. And this method will cause each page to contain a bunch of CSS files--because of how many include, how many CSS files.

Method Three: Based on the mark

This program is intuitive and practical, similar to the previous one. If the site has 30 pages, 10 of which contain a form, you can create a CSS file that deals with the style of form and only imports it on these 10 pages. If the other 10 pages contain a table, create a file that deals specifically with the table style ... Such.

Summarize:

CSS is not just visual design, and do not throw the best practice of programming because you write CSS. Rules such as OOP, DRY, open/close, and content separation should be applied to CSS. No matter how you organize your code, make sure that the method really helps you and makes your development easier and maintainable.