Build a website and properly plan CSS files

CSS is becoming more and more mainstream in the current development environment. Enterprises and IT companies are attaching more and more importance to CSS, and they are enthusiastic about learning. CSS has been given an unprecedented mission. However, the more css dependencies, the more complex the style sheet file will become. At the same time, the file maintenance and organization tests also follow. Once upon a time, only one CSS file was enough-all the Rules (rule) gathered to facilitate addition, deletion, and modification-but such days have long gone. When building a website, you must spend some time planning, organizing the planning, and building a reasonable and efficient CSS system.

First, starting from the file organization, the first step to building a css system is to draw up the outline. Webjx.com believes that css organization planning is more important than website directory structure. There is no suitable solution, so we will discuss some basic organizational solutions and their respective advantages and disadvantages. You need to think based on the characteristics of your development project to confirm the final solution.

Generally, you can use a primary CSS file to place rules shared by all pages. This file contains the default font, Link, header and footer, and other styles of the same module. With the main CSS file, we began to explore more advanced CSS organization policies.

1. Prototype-based

The most basic policy is to separate CSS files based on the archetype page. A prototype-based policy can be used if the homepage, subpage, and group page of a website are different in design. Under this policy, each page will have an exclusive CSS file.
This method is simple, clear, and effective when the number of prototypes is small. However, when the page elements are not step-by-step on each prototype page, the problem arises. What should we do if the child page and the group page share some elements but the home page does not?

Put the shared element into the main CSS file. Although this is not the most pure solution, it applies to some specific situations. However, if the website is large (in this case), the main CSS file will expand rapidly-This violates the original intention of splitting the file: avoid importing unnecessary large files.

Put a style code in the CSS file of the combination page and sub-page. This means to maintain redundant code. Obviously, we don't want to do this.

Create a new file, which is shared by the two pages. This sounds good. But if there are only 10 lines of code, we create this file to share the 10 lines of code? This method is pure, but if the website is large and there are many elements that share a small number of pages, it will become very cumbersome.

Create a separate CSS file that contains the styles of all the shared elements. This method may be relatively simple, but it depends on the size of the website and the number of shared elements. There is a situation that will be annoying: A large CSS file is imported, but the page only uses a small part of the style-or that sentence, which violates the original intention of file separation.

This is what I call overlap dilemma ). Fragmented css rules overlap, and there is no clear solution to organize them.

2. Based on page elements and modules

If the website uses the server side include, this method will be very good. For example, if you use the header include, it will have its own CSS file. The include of the footer or other parts can be processed as an example. You only need to import your own CSS file. This method is simple and clean, but may generate many small CSS files.

For example, if the footer style requires only 20 lines of css code, you cannot create a single file. In addition, this method will cause each page to contain a bunch of CSS files-the number of CSS files is required because of the number of include files.

Iii. Tag-based

This solution is intuitive and practical, similar to the previous one. If the website has 30 pages, 10 of which contain form, you can create a CSS file to process the form style and only import it on these 10 pages. If the remaining 10 pages contain tables, create a file to specifically process the table style ...... And so on.

IV. Other CSS organization skills

In addition to using subjective methods to organize files, we also need to consider multiple media types such as printing, handheld devices, and screens. Although clearly defined, this is still a factor to consider when creating a file structure. Once multiple media types are supported, some rules in the main CSS file may have to be reconsidered. In addition, brand association may also be an important factor. If brand association is involved, you have to consider which elements should be adjusted to adapt to another brand. For example, use different CSS files. For more tips, follow the webjx.com article.

Another method that is often ignored: Use nested @ import statements. Only a series of @ import statements or css rules can be added to create a CSS file. You can use this method to create the main CSS file of the website (use @ import to import the style files of each part ). If 4 to 5 different CSS files are imported to each page of the website, you should consider using this technique.