Large websites and CSS Organizational Structure

In the early stage of large-scale projects, we must make good plans and make reasonable plans... The same is true for CSS files. Generally, when you are working on such a project, the website will have a folder dedicated to CSS ..
Bytes ----------------------------------------------------------------------------------------------------------------------------

With the general support of browsers, 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) as long as a css file is enough-all the Rules (rule) gather together to facilitate addition, deletion, and modification-The days have long gone. (Now) when creating a new website, you must spend some time planning how to organize and structure css.

File organization

The first step in building a css system is to draw up the outline. (I think) css organization planning is more important than website directory structure. (Htmlor note: the words are exaggerated to help you better remember.) There is no common solution, so we will discuss some basic organizational plans and their respective advantages and disadvantages.

Main css file

Generally, you can use a primary css file to place rules shared by all pages. This file contains default fonts, links, headers, and other styles. With the main css file, we began to explore advanced organizational strategies.

Method 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.

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? (Htmlor Note: How can I use a cow to kill a chicken ?) This method is pure, but if the website is large and has many elements that share a small number of pages (htmlor Note: for example, 30 pairs of pages share 10 lines of code respectively), it will be 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.

Method 2: Based on page elements/blocks

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.

Method 3: 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.

Other organizational 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. (Htmlor Note: for example, joga jointly launched by google and nike) If brand association is involved, you need to consider which elements should be adjusted to adapt to another brand. For example, use different css files.

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.

Organization of rules and selectors

After talking about the file organization, let's discuss how to organize the content in the file. Naturally, we hope to browse the file smoothly and quickly find the selector or rule to be edited.

Redundancy vs. Attach

As Dave Shea said in his article Redundancy vs. Dependency, you must constantly understand cascade ). You have to decide whether to group the selector (meaning affiliated) or separate them (meaning redundant ). Grouping can keep the code concise and concise, but it will establish a subsidiary relationship, resulting in increased maintenance overhead. If no group exists, the file size will be increased, making it difficult to keep similar selectors consistent. Only by balancing and making trade-offs can we make the right decisions each time.

Group by relationship/Context

Since file organizations can be subjective, it is clear that grouping based on the relationship between rules and selectors and other parts is the best way. For example, if you use containers, headers, and footers to complete the layout, you should combine them into a group.

This seems simple, but it is not. For example, when adding the navigation in the header to css, is it grouped together with the parent element or independently? In this case, it depends on the context of the rule. Generally, the header is related to the page layout and should be grouped together with other layout elements. Navigation is a part of the header. It should be grouped with other parts of the header, rather than the header itself.

Use comments

Like most codes, annotations are the key to good organization. Each section should be clearly marked based on the css control scope ). It is best to ensure that the annotation is visually highlighted so that the content can be quickly located when the content is scrolled and 10 rows are scanned.

Doug Bowman wrote css comments in his article "CSS Organization skills: Tag" (css Organization Tip #1: Flags. He explained in detail how to add an equal sign before the node name so that you can quickly jump to a section using the search function of the text editor.

Don't forget

You should carefully understand the specificity, cascade, and inheritance, and make good use of them. Each of them can be your most terrible enemy or your most friendly friend. When building a huge website, whether or not to understand these nuances determines whether you are building a rock-solid system or unable to withstand the storm. (Htmlor Note: This sentence is a perfect example)

Organization of attributes

Now we understand the organization of the file and the organization of the rules in the file, but there is also an important organizational link (not mentioned), that is, attribute ). Although attributes are simpler than the first two concepts, there are still some very good methods to keep rules clean.

Sort by letter

When it comes to attributes, if we need to follow any principle, we should follow the following rules:-words-parent-row-order. In fact, this method is not helpful for Attribute browsing, but it can prevent property values from overwriting such incidents.

For example, I have already defined a margin value for a selector and accidentally added another one (or one before or after ). (In this case) The last attribute will naturally work. If I do not know that the second property exists, no matter how I adjust the first property value or refresh the browser, the page will not be changed. (Htmlor Note: I have a deep understanding about this issue.) If you sort the data in alphabetical order, you will find that margin has been defined twice (because they are tied together). This problem can naturally be avoided.

Priority

When the website is complex and involves too many css files, a large number of affiliated relationships are established. Once you need to customize the style unique to an element ,! The important option seems to be the best choice. That's right ,! Important is a temporary solution, but it is best to find out the root cause of the problem and decide whether to use it based on the cascading relationship.

If you are familiar with the specificity, cascade, and inheritance mentioned above, you don't have to hold it! Important is not a tree. (Htmlor note: the whole forest is waiting for you ~) Of course, it will still work in handy, but before using it, you need to understand the specific situation. Do not stick to it because you do not know the crux of the problem! Important is a shortcut or remedy.

Summary

When we become dependent on css to make style sheets increasingly complex, we need the right plan to avoid mistakes and make the code easy to maintain. Since the perfect solution does not exist, understanding css's working methods and various organization schemes for files, selectors, and attributes will undoubtedly help us to write high-quality code and withstand the test of time.