Five ways to improve the maintainability of CSS files _ experience Exchange
Source: Internet
Author: User
1. Break down your style
For small projects, before writing code, divide the code into pieces and annotate it by page structure or page content. For example, you can continue working by dividing global styles, layouts, font styles, forms, comments, and other pieces into several different blocks, respectively.
For larger projects, this obviously won't have any effect. At this point, you need to decompose the styles into several different style sheet files. The following Master stylesheet is an example of this approach, and its work is mainly to import other style files. Using this method not only optimizes the style structure, but also helps reduce some unnecessary server requests. There are many ways to decompose files, and master stylesheet uses the most common one.
For large projects, you can also add a CSS file upgrade logo or some diagnostic measures, no longer detailed here.
2. Set up CSS file index
In order to quickly understand the structure of the entire CSS file, it is a good choice to establish a file index at the beginning of the file. One possible way to do this is to create a tree index: Both the ID and class on the structure can be 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 you can do this:
Another way to do this is simply to enumerate the contents first, and not to indent them. In the following example, if you need to skip to the RSS section, you only need to search for a simple 8.RSS.
Defining such a style search can be very effective in making it easier for others to read and learn your code. When making a big project, you can also print the search to make it easier for you to read the code.
3. Define your color and layout
We can't use constants in CSS, but the code for color and typography is that we often encounter classes that can be used many times, where we can see them as constants for CSS.
A way to reduce the definition of the amount of CSS impermanence is to define the next definition in the annotation at the top of the CSS file, which is to define constants. One of the simplest applications is to create a color table. So you can quickly understand the color of the entire page, so as to avoid some repeated changes in the process of error. If you need to change the color, you can also quickly find it.
# Dark Grey (text): #333333
# Dark Blue (headings, links) #000066
# Mid Blue (header) #333399
# Light Blue (top navigation) #CCCCFF
# Mid Grey: #666666
# */
Alternatively, you can also choose to describe the colors used in your layout. For a given color, you can list the blocks used for that color. Of course, you can also choose to list colors by page element.
A (Standard): #0040b6 (dark blue)
A (visited): #5999de (light blue)
A (Active): #cc0000 (Pink)
-------------------------------------------------------------------*/
Notes:decreasing heading by 0.4em and every subsequent heading level
-------------------------------------------------------------------*/
4. Format CSS Properties
When we write code, using some special coding style will be helpful to improve the readability of CSS code. Many people have different coding styles. Some people are used to putting color and font code in front of them, while the other part prefers to put more "important" attributes like floating and positioning in the front. Similarly, you can sort the page elements according to their structure in the layout:
Body
H1, H2, H3,
P, UL, Li,
form {
border:0;
margin:0;
padding:0;
}
Some developers use a more interesting approach: they put attributes in alphabetical order. It is worth noting that such a method may cause problems for some browsers.
Regardless of your format, make sure you have clearly defined these formatting methods. In this way, your colleagues will appreciate your efforts while reading your code.
5. Indentation will be your friend!
To make your code feel more intuitive, you can use one line to define the style of the outline element. This approach creates confusion when the specified selector has more than three properties. However, in a modest way, you can clearly distinguish between the different points of the same class.
#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 a more troublesome problem. Many people change the style after forget, the result later found that the modified style caused the page error, had to look for. Therefore, it is necessary to build a special format for the modified style. An easy way to do this is to indent the modified style, and you can use annotations (such as "@new") to make an identification.
#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 suitable style guide can help with the readability of the style sheet. Remember, 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 on a CSS file that is readable and maintainable.
The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion;
products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the
content of the page makes you feel confusing, please write us an email, we will handle the problem
within 5 days after receiving your email.
If you find any instances of plagiarism from the community, please send an email to:
info-contact@alibabacloud.com
and provide relevant evidence. A staff member will contact you within 5 working days.
