Css tutorial: CSS files with good readability and maintainability

In Zhan. liehuo. in most articles of Net, 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 ";
@ 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 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 relevant articles of webjx.com.

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. You can also refer to the following article.

3. 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 {
Margin: 0;
Padding: 0;
Border: 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. You can also refer to the following article.

4. Rational Use of indentation

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: 300px ;}
# Main-column h1 {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. Do not forget to share your experience with webjx.com. Welcome to the comments.