Therefore, the good structure of the code to a large extent to optimize its maintainability. The following is a list of four tips for improving the maintainability of CSS files as a guide for Web front-end development with a good CSS style organization.
one, CSS style file decomposition
For small projects, before writing code, divide the code into pieces and annotate it by page structure or page content. For example, you can continue working by dividing global styles, layouts, font styles, forms, comments, and other pieces into several different blocks, respectively.
For larger projects, this obviously won't have any effect. At this point, you need to decompose the styles into several different style sheet files. The following Master stylesheet is an example of this approach, and its work is mainly to import other style files. Using this method not only optimizes the style structure, but also helps reduce some unnecessary server requests. There are many ways to decompose files, and master stylesheet uses the most common one.
@import "Reset.css";
@import "Layout.css";
@import "Colors.css";
@import "Typography.css";
@import "Flash.css";
* * @import "debugging.css"; */
At the same time for large projects, you can also add CSS file upgrade logo or some other measures such as diagnostics, no longer detailed here. Everyone attention in the implementation of the work summed up and thinking, but also welcome to refer to Jb51.net related articles.
Second, the CSS file to create an index
In order to quickly understand the structure of the entire CSS file, it is a good choice to establish a file index at the beginning of the file.
A feasible approach is to create a tree-shaped index, where the ID and class of the structure 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 first, and not to indent them. In the following example, if you need to skip to the RSS section you only 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
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 a big project, you can also print the search to make it easier for you to read the code.
Current 1/2 page
12 Next read the full text
