Guide to improving the maintenance and readability of CSS files page 1/2-Experience Exchange

In most articles, we do not pay special attention to the maintenance and readability of CSS files. After a front-end job is completed, many people will forget the structure and details of the project. However, the Code is not completely finalized immediately, and there will be continuous maintenance work for the rest of the time, and these work may not be done by yourself. Therefore, code with excellent structure can greatly optimize its maintainability. The following lists four methods to improve the maintainability of CSS files. This serves as a guide for WEB Front-end development with a good CSS style Organization habit.

I. CSS style file Decomposition

For small projects, the code is divided into several parts by PAGE structure or page content before writing code, and comments are given. For example, you can separate global styles, la S, font styles, forms, comments, and others into several different parts to continue working.

For large projects, this obviously won't have any effect. In this case, you need to break down the style into several different style table files. The following example of the master stylesheet method is used to import other style files. Using this method can not only optimize the style structure, but also reduce unnecessary server requests. There are many methods to break down files. 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 ";*/


In addition, you can add the CSS file upgrade mark or some diagnosis and Other Measures for large projects. Everyone should pay attention to the summary and consideration in the implementation work. You are also welcome to refer to the articles related to jb51.net.

2. Create an index for the CSS file
To quickly understand the structure of the entire CSS file, creating a file index at the beginning of the file is a good choice.
A feasible method is to create a tree index. The structure id and class can both 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

Alternatively, you can:
[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


The other method is simply to list the content without indentation. In the following example, if you want to jump to the RSS part, you only need to perform 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 easy for others to read and learn your code. When creating a large project, you can print the search to facilitate reading the code.