Summary of five methods to improve the maintainability of CSS files

1. Break down your style

For small projectsCodePreviously, the code was divided into several parts by PAGE structure or page content and annotated. 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.

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

[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 ";*/

In addition, you can add the CSS file upgrade mark or some diagnostic measures for large projects.

2. Create a CSS file index

To quickly understand the structure of the entire CSS file, creating a file index at the beginning of the file is a good choice. One feasible method is to create a tree index: both the structure ID and class 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
-----------------------*/
Alternatively, you can:

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

[Table of 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 simply search 8.rss.

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

[Table of 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.

3. Define your color and Layout

We cannot use constants in CSS, but the code for writing color and layout is a class we often encounter that can be used many times. Here we can regard it as a CSS constant.

One way to reduce CSS definition without constants is to add some definitions in the comment at the top of the CSS file, that is, to define constants. The simplest application is to create a color table. In this way, you can quickly understand the color of the entire page, so as to avoid some errors in the Process of repeated modification. If you need to modify the color, you can quickly find it.

/*------------------------------------------------------------------
# [Color codes]

# Dark gray (text): #333333
# Dark blue (headings, links) #000066
# Mid blue (header) #333399
# Light blue (top navigation) # ccccff
# Mid Gray: #666666
#*/

Alternatively, you can select the color used to describe your layout. For a given color, you can list the blocks that use the color. Of course, you can also choose to list colors by page elements.

/*------------------------------------------------------------------
[Color codes]
Background: # ffffff (white)
Content: # 1e1e1e (light black)
Header H1: # 9caa3b (green)
Header H2: # ee4117 (red)
Footer: # b5cede (dark black)

A (standard): #0040b6 (dark blue)
A (visited): # 5999de (light blue)
A (active): # cc0000 (pink)
-------------------------------------------------------------------*/

The same layout example is provided.

/*------------------------------------------------------------------
[Typography]

Body copy: 1.2em/1.6em verdana, Helvetica, Arial, Geneva, sans-serif;
Headers: 2.7em/1.3em Helvetica, Arial, "lucida sans Unicode", verdana, sans-serif;
Input, textarea: 1.1em Helvetica, verdana, Geneva, Arial, sans-serif;
Sidebar heading: 1.5em Helvetica, trebuchet MS, Arial, sans-serif;

Notes: decreasing heading by 0.4em with every subsequent heading level
-------------------------------------------------------------------*/

4. Format CSS attributes

When writing code, using some special encoding styles can greatly improve the readability of CSS code. Many people have different encoding styles. Some people tend to put the color and font code in front, while others prefer to put more "important" attributes like floating and positioning in front. Similarly, you can sort page elements by their structure in the layout:

Body,
H1, H2, H3,
P, UL, Li,
FORM {
Border: 0;
Margin: 0;
Padding: 0;
}

Some developers use a more interesting method: they sort the attributes in the order of the first letter. It is worth noting that such a method may cause problems for some browsers.

Regardless of your own format, make sure that you have clearly defined these formats and methods. In this way, your colleagues will thank you for your efforts when reading your code.

5. indent will be your friend!

To make your code more intuitive, you can use a line to define the style of the outline element. When there are more than three attributes in the specified selector, this method will bring confusion. However, to use this method appropriately, you can clearly distinguish the differences between the same classes.

# Main-column {display: inline; float: Left; width: 30em ;}
# Main-column H1 {font-family: Georgia, "Times New Roman", times, Serif; margin-bottom: 20px ;}
# Main-column P {color: #333 ;}

At the same time, style modification maintenance is also a troublesome problem. Many people forget the style after modification, and later found that the modified style caused a page error and had to search for it. Therefore, it is necessary to build a special format for the modified style. One simple way is to indent the modified style. You can also use some annotations (such as "@ new") to make an identifier.

# Sidebar ul Li {
Display: block;
Background-color: # CCC;
Border-bottom: 1px solid #999;/* @ New */
Margin: 3px 0 3px 0;
Padding: 3px;/* @ New */
}

In general, only creating a proper style guide can help to read the style sheet. Remember, move to every style guide that does not help you understand the file and avoid using too many style guides for too many elements. Then, work hard for a CSS file with good readability and maintainability.