Five ways to improve the maintainability of CSS files _ experience Exchange
Source: Internet
Author: User
1. Break down your style
For small projects, divide the code into pieces and give comments by page structure or page content before writing the code. For example, you can continue to work by dividing the global style, layout, font style, forms, comments, and other pieces into several different blocks, respectively.
And for larger projects, this obviously will not have any effect. At this point, you need to decompose the styles into several different stylesheet files. The following Master stylesheet is an example of this approach, and its main task is to import other style files. Using this method not only optimizes the style structure, but also helps to reduce 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 CSS file upgrade flags or some diagnostic measures, which are not detailed here.
2. Create a CSS file index
To be able to quickly understand the structure of the entire CSS file, it is a good idea to create a file index at the beginning of the file. One possible way is to create a tree-shaped 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 and not to indent them in the first place. In the following example, if you need to jump to the RSS section you simply need to search for 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 large projects, you can also print the search so that it's easy to read when you're reading the code.
3. Define your color and layout
We cannot use constants in CSS, but in writing color and layout code we often encounter classes that can be used many times, where we can see them as constants of CSS.
One way to reduce the definition of CSS impermanence is to define constants in the comments at the top of the CSS file. One of the simplest applications is to create a color table. This allows you to quickly understand the color of the entire page, thus avoiding some mistakes in the process of repeated changes. If you need to change the color, you can also find it quickly.
# 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 that are used in 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 with every subsequent heading level
-------------------------------------------------------------------*/
4. Formatting CSS Properties
When we write code, the use of some special coding style will improve the readability of the CSS code is very helpful. Many people have their own different coding styles. Some people are used to putting the color and font code in front, while the other part prefers to put more "important" properties like floating and positioning ahead. Similarly, you can sort a page element according to its 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 sort the attributes in alphabetical order. It is important to note that such a method may cause problems for some browsers.
Regardless of your format, make sure you have a clear definition of these formatting methods. In this way, your colleagues will appreciate your efforts when 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 there are more than three properties in the specified selector. However, with this approach in moderation, you can clearly distinguish between 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 forget after modifying the style, the result later found that the modified style caused the page error, have to hard to find. 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 also use some annotations (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 */
}
Overall, it is only possible to create a suitable style guide to help with the readability of your stylesheet. Remember, remove each style guide that doesn't help you understand the file, and avoid using too many style guides for too many elements. Then, work hard for a well-readable and maintainable CSS file.
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.
A Free Trial That Lets You Build Big!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
