Summary of five methods to improve maintainability of CSS files_Experience exchange

1. Decompose your style

For small projects, before writing code, divide the code into several blocks 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 method, and its job is mainly 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.

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

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

At the same time, for large projects, you can also add CSS files Upgrade flags or some diagnostic measures will not be detailed here.

2. Create a CSS file index

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. One possible method is to build a tree-shaped index: both 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 
——————————————————————-*/
或者也可以这样： 

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

[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 

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

另一种方式可以只是先简单的将内容列举出来，也不需要缩进。下面的一个例子中，如果你需要跳至RSS部分你只需要简单的搜索 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 { ... }

Definition 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.

3. Define your colors and layout

We cannot use constants in CSS, but when writing color and layout code, we often encounter classes that can be used many times. This can be regarded as a CSS constant.

One way to reduce the risk of CSS without constant definitions is to put some definitions in comments at the top of the CSS file, that is, define constants. One of the simplest applications is to create a color table. In this way, you can quickly understand the color of the entire page, thereby avoiding some mistakes during repeated modifications. If you need to make changes to the color, you can find it quickly.

/*--------------------------------------------- --------------------------
# [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 choose to describe the colors used in your layout. For a given color, you can list the blocks that use that color. Of course, you can also choose to list colors by page element. 

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

对于版式有同样的例子。 

/*------------------------------------------------------------------ 
[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.格式化CSS属性 

当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序： 

body, 
h1, h2, h3, 
p, ul, li, 
form { 
border: 0; 
margin: 0; 
padding: 0; 
} 

一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。 

不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。 

5.缩进会是你的朋友！ 

为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这种方式，你可以很清楚的区分相同类的不同点。

#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, the maintenance of style modification is also a troublesome problem. Many people forget about it after modifying the style. As a result, they later find that the modified style caused page errors and they have to search hard for it. Therefore, it is necessary to construct a special format for the modified style. A very simple way is to indent the modified style. At the same time, you can also use some comments (such as "@new") to make a mark.

#sidebar ul li a {
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 will make the style sheet readable Sex helps. Remember to remove any style guide that does not help you understand the document and avoid using too many style guides for too many elements. Then, work hard for a CSS file that is readable and maintainable.