Shulou(Shulou.com)06/03 Report--

This article focuses on "how to structure CSS reasonably". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to structure CSS reasonably.

Architecture CSS

With the general support of current browsers, css has been entrusted with an unprecedented mission. However, the more you rely on css, the larger and more complex the stylesheet file will become. At the same time, the test of document maintenance and organization also follows.

(once upon a time) just one css file was enough-- all the rule came together, and it was easy to add, delete and change-- but those days are long gone. When you set up a new website, you must take some time to plan how to organize and structure css.

Organization of documents

The first step in building a css system is to draw up an outline. (I think) css organizational planning is as important as the website directory structure. (note: no scheme is universal, so we will discuss some basic organizational plans, as well as their respective pros and cons.

Master CSS file

You can usually use a main css file to place the rules that all pages share. This file will contain default fonts, links, headers, and other styles. With the master css file in place, we began to explore high-level organizational strategies.

Method 1: based on prototype

The most basic strategy is to separate the css file based on the prototype page (archetype page). If the design of the home page, sub-page, and composite page of a website is different, a prototype-based strategy can be adopted. (under this strategy) each page will have its own css file.

In the case of a small number of prototypes, this method is simple and effective. However, problems arise when page elements are not routinely located on each prototype page. What should we do if the child page and the composite page share some elements, but the front page does not?

Put the shared elements in the main css file. This is not the purest solution, but it applies to some specific situations. However, if the site is large, the main css file will expand rapidly-which goes against the original intention of separating the file: to avoid importing unnecessarily large files.

Put a style code in the css file of the combined page and the sub-page. It means maintaining redundant code, which we obviously don't want to do.

Create a new file to be shared by the two pages. That sounds good. But if there are only 10 lines of code, we create this file just to share those 10 lines of code? (note: use a cow knife to kill a chicken?) This approach is pure, but it will be cumbersome if the site is large and has many pairs of pages sharing very few elements (for example, 30 pairs of pages share 10 lines of code each).

Create a separate css file that contains styles for all shared elements. This approach may be simple, but it depends on the size of the site and the number of shared elements. It can be annoying to import a large css file but only use a small number of styles on the page-again, which goes against the original intention of separating the file.

This is what I call an overlapping overlap dilemma. Piecemeal css rules overlap, and there is no completely clear plan to organize them.

Method 2: based on page elements / blocks

This would be a good idea if the 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 parts of the include can be made in the same way, just import your own css file. This method is simple and clean, but it may produce a lot of small css files.

For example, if the footer style requires only 20 lines of css code, you can't create a single file. And this approach causes each page to contain a bunch of css files-- because there are as many include files as there are css files.

Method 3: tag-based

This scheme is intuitive and practical, similar to the previous one. If the site has 30 pages, 10 of which contain form, you can create a css file that specifically deals with the style of form and import it only on those 10 pages. If the other 10 pages contain table, create a file that specifically deals with table styles. and so on.

At this point, I believe you have a deeper understanding of "how to reasonably structure CSS". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.