After completing a front-end work, many people forget the structure and details of the project. However, the code will not be completely finalized right away. There will be continuous maintenance work during the remaining time, and these work may not be completed by yourself. Therefore, well-structured code can greatly optimize its maintainability. Here are five ways to improve the maintainability of your CSS files, which is a better CSS style guide.
1. Break down your styles
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 approach, and its main job is 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] |
At the same time, for large projects, you can also add upgrade flags for CSS files or some diagnostic measures, which will not be detailed here.
2. Create 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: the structural id and class can become 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 ——————————————————————-*/ |
Or this can also be done:
/*------------------------------------------------ ------------------ [Table of contents] -------------------------------------------------- ------------------*/ |
Another way is to simply list the content first, without indentation. In the example below, if you need to jump to the RSS section you simply search for 8.RSS.
/*------------------------------------------------ ------------------ [Table of contents] -------------------------------------------------- ------------------*/ /*------------------------------------------------ ------------------ |
Defining 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.