Guide to Improving Maintainability and Readability of CSS Files Page 1/2_Experience Exchange

So, well-structured code can greatly optimize its maintainability. Listed below are four tips to improve the maintainability of CSS files, as a guide to carry out WEB front-end development with a better CSS style organization habit.

1. Decomposition of CSS style files

For small projects, before writing the code, divide the code into several pieces according to the page structure or page content. and give comments. For example, you can separate global styles, layouts, font styles, forms, comments, and others into several different blocks to continue working.

For larger projects, this will obviously not have any effect. At this point, the style needs to be broken down into several different style sheet files. The master stylesheet below is an example of this approach, and its main job is to import other style files. Using this method can not only optimize the style structure, but also help reduce some 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"; */


At the same time, for large projects, you can also add upgrade flags for CSS files or some diagnostics and other measures, which will not be detailed here. narrate. Please pay attention to summarizing and thinking during the implementation work, and you are also welcome to refer to the relevant articles of jb51.net.

2. Index the CSS file
In order to quickly understand the structure of the entire CSS file, it is a good choice to create a file index at the beginning of the file.
A feasible method is to build a tree-shaped index. The structural id and class can become 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 it can be like 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 can be just First simply list the content without indentation. In the example below, if you need to jump to the RSS section you just need to do 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
10. Boxes / .box
11. Sideblog / #sideblog
12. Advertisements / .ads
13. Footer / #footer

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

Defining such a style search can effectively make it easier for others to read and learn your code. When working on large projects, you can also print out the search for easy reference when reading the code.