Five ways to improve the maintainability of a CSS file

After completing a front-end job, many people forget the structure and details of the project. However, the code is not immediately complete stereotypes, the rest of the time there is continuous maintenance work, and these jobs may not be done by yourself. Therefore, the good structure of the code to a large extent to optimize its maintainability. Here are five ways to improve the maintainability of a CSS file, which is a good CSS style guide.

1. Break down your style

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.

/*------------------------------------------------------------------

[Master Stylesheet]
Project: Smashing Magazine
Version: 1.1
Last change: 05/02/08 [fixed Float bug, vf]
Assigned to: Vitaly Friedman (vf), Sven Lennartz (sl)
Primary use: Magazine
-------------------------------------------------------------------*/
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/* @import "debugging.css"; */

For large projects, you can also add a CSS file upgrade logo or some diagnostic measures, no longer detailed here.

2. Set up CSS file 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. One possible way to do this is to create a tree index: Both the ID and class on the structure can be a branch of the tree. As follows:

/*------------------------------------------------------------------
[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
——————————————————————-*/