CSS file can be maintained, readability Improvement Guide 1th/2 Page _ Experience Exchange

As a result, the well-structured code optimizes its maintainability to a great extent. The following is a list of four techniques for improving the maintainability of CSS files as a guide to Web front-end development with a good CSS style organization habit.

First, CSS style file decomposition

For small projects, divide the code into pieces and give comments by page structure or page content before writing the code. For example, you can continue to work by dividing the global style, layout, font style, forms, comments, and other pieces into several different blocks, respectively.

And for larger projects, this obviously will not have any effect. At this point, you need to decompose the styles into several different stylesheet files. The following Master stylesheet is an example of this approach, and its main task is to import other style files. Using this method not only optimizes the style structure, but also helps to reduce unnecessary server requests. There are many ways to decompose files, and master stylesheet uses the most common one.



@import "reset.css?1.1.5";
@import "layout.css?1.1.5";
@import "colors.css?1.1.5";
@import "typography.css?1.1.5";
@import "flash.css?1.1.5";
/* @import "debugging.css?1.1.5"; */


For large projects, you can also add CSS file upgrade flags or some other measures such as diagnostics, which are no longer detailed here. We pay attention to the realization of the work of summing up and thinking, but also welcome more reference Jb51.net related articles.

Second, index the CSS file
To be able to quickly understand the structure of the entire CSS file, it is a good idea to create a file index at the beginning of the file.
One way to do this is to create a tree-shaped index, and the structure ID and class can be a branch of the tree.
[Layout]
* Body
+ header/#header
+ content/#content
-Left column/#leftcolumn
-Right column/#rightcolumn
-sidebar/#sidebar
-rss/#rss
-search/#search
-Boxes/. Box
-sideblog/#sideblog
+ footer/#footer
Navigation #navbar
Advertisements. Ads
Content Header H2

Or you can do this:
[Contents]
1. Body
2. header/#header
2.1. navigation/#navbar
3. content/#content
3.1. Left column/#leftcolumn
3.2. Right column/#rightcolumn
3.3. sidebar/#sidebar
3.3.1. rss/#rss
3.3.2. search/#search
3.3.3. Boxes/. Box
3.3.4. sideblog/#sideblog
3.3.5. Advertisements/. Ads
4. footer/#footer


Another way to do this is simply to enumerate the contents and not to indent them in the first place. In the following example, if you need to jump to the RSS section you just need a simple search.

[Contents]
1. Body
2. header/#header
3. navigation/#navbar
4. content/#content
5. Left column/#leftcolumn
6. Right column/#rightcolumn
7. sidebar/#sidebar
8. rss/#rss
9. search/#search
Ten. Boxes/. Box
sideblog/#sideblog
Advertisements/. Ads
footer/#footer

/*--[8. rss/#rss]--*/
#rss {...}
#rss img {...}

Defining such a style search can be very effective in making it easier for others to read and learn your code. When making large projects, you can also print the search so that it's easy to read when you're reading the code.

