Improve readability of css + div layout

Improve readability of css + div layout

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 summing up and thinking in the implementation work. You are also welcome to read more articles.

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.
Practical CSS experience: keep CSS files clean and consistent with styles
Http: // www./article. asp? Id = 710

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.
Optimize code to improve readability of CSS files
Http: // www./article. asp? Id = 765

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 */
}