CSS tutorial: Readability and maintainability of CSS files

In most articles, we don't pay particular attention to the maintainability and readability of CSS files, and when a front-end job is done, many people forget the structure and details of the project. H owever, the code is not fully stereotyped right away, and there is ongoing maintenance work for the rest of the time, which you may not be able to do on your own. T herefore, well-structured code can greatly optimize its maintainability. H ere are four tips for improving the maintainability of CSS files as a guide for WEB front-end development with a better CSS style organization habit.

First, CSS style file decomposition

For small projects, divide the code into pieces and comment on it by page structure or page content before writing the code. F or example, you can continue working with global styles, layouts, font styles, forms, comments, and others divided into several different blocks.

For larger projects, this will obviously not have any effect. A t this point, you need to break the style down into several different style sheet files. T he following master stylesheet is an example of this approach, which mainly works by importing other style files. U sing this approach not only optimizes the style structure, but also helps reduce unnecessary server requests. There are many ways to break down files, and master stylesheet uses one of the most common.

@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 upgrade flags for CSS files or other measures such as diagnostics, which are not detailed here. We pay attention to the implementation of the work of summary and thinking.

Second, index CSS files

In order to get a quick understanding of the structure of the entire CSS file, indexing the file at the beginning of the file is a good choice.

One possible approach is to build a tree index, where both the id and class on the structure 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

Or 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

Another way is to simply list the content first, without indentation. In the following example, if you need to jump to the RSS section you just need 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. R SS / #rss]--*/
#rss { ... }
#rss img { ... }

Defining such a style retrieval can be very effective in making it easy for others to read and learn your code. W hen you're working on a big project, you can also print out the search to make it easier to access as you read the code. You can also refer to the following article.

Third, format the CSS properties

When we write code, using some special coding styles can go a long way to improving the readability of CSS code. M any people have different coding styles. S ome people are used to putting color and font code first, while others prefer to put more "important" properties like floating and positioning first. Similarly, page elements can be sorted by its structure in the layout:

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

Some developers use a more interesting approach: they arrange attributes in alphabetical order. I t is important to note that such an approach may cause problems for some browsers. R egardless of your formatting, make sure that you have clearly defined these formatting methods. I n this way, your colleagues will appreciate your efforts as they read your code. You can also refer to the following article.

Fourth, reasonable use of indentation

To make your code feel more intuitive, you can use a line to style outline elements. T his approach can be confusing when there are more than three properties in the specified selector. However, with modest use of this approach, 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, the maintenance of style modification is also a cumbersome problem. M any people change the style and forget it, only to find that the modified style caused the page to go wrong and had to struggle to find it. T herefore, it is necessary to build a special format for the modified style. One simple way is to indent the modified style, and you can also use comments such as "@new" to make an identity.

#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 establishing a suitable style guide will help with the readability of the style sheet. R emember, remove every style guide that doesn't help you understand the file, and avoid using too many style guides for too many elements. Then, work for a well-readable, maintainable CSS file.