CSS Tips Tutorial: Make CSS code more maintainable

How do you make your CSS code more organized and maintainable, and why is your style sheet always bloated and confusing? Sometimes it comes from the confusion and haste at the beginning of the writing, but also because of later maintenance and the need for a variety of hack, but anyway, writing a clean, manageable css is simple, and here are 10 ways to improve:
1. Be organized.
As with many other things, it's best to keep a good organization, not to write IDs on IDs, to write class with class, but to keep the style sheet in a coherent structure, which allows you to take advantage of style inheritance. First define your most commonly used items, then be less commonly used and then the other, this will make your CSS properties get the right inheritance, and when you need to redefine a particular style it will be simple and will make you later modify and edit the CSS faster because it follows a simple, readable, logical structure.
A good CSS structure should include the following sections:

1. Reset and Overwrite (resets & overrides)
2. Links and fonts (links & type)
3. Primary layout (main layout)
4. Secondary layout structure
5. Form elements
6. Miscellaneous

The following illustration shows an example:

2. Style name, creation time, signature.
Let others know who wrote the style sheet, and when they have problems, they can consult in time, which is very useful in making templates or topics as well as team work.

daimaren.cn©2009-2010 by Tomie Zhang

1 2 3 4 5 6 7 8 9 ten -one 12

/*========= Daimaren style Copyright by Tomieweb@gmail.com for -www.daimaren.cn swatch Colors ------------------- ff0000-red 0000ff-blue 13437a-dark Blue E1e1e1-light Gray ===========*/

Swatch Colors recorded some of this style used in color values, and their corresponding color description, so that is convenient for later editing work, you do not have to open PS or other color software to find color, turn to the top of the style copy.

3. Make a template library.
Every time you finish making a stylesheet, you can get rid of things that aren't common, and then save the file as a CSS template for later use.
Each version can be saved for a variety of purposes: two-column layout, blog layout, print style, mobile device style, and so on. Coda has a great editing function that can help you save the template easily. Many other editors have similar features, even a simple text batch can make a template library very well.
It's crazy to rewrite every single code from scratch every time, especially when you're using the same conventions and methods.

4. Use a useful naming convention.
You may notice that in the example in the first recommendation, you define a pair of IDs: Col-alpha and Col-beta, why not just call Col-left and col-right? Think about the work we're going to do in the future,
Next year you may want to adjust the content on the left to the right, and you should not rename your HTML elements and rename the stylesheet's IDs just to move the position.
Yes, maybe you say you can move the left to the right without altering its HTML element ID name, still called Col-left, but how confusing it would be, ID describes the left side, so it should always stay on the left side, not the opposite.
One of the main advantages of CSS is performance and content separation, you can not move HTML, but just modify the CSS to redesign your site, so do not use a limited naming, and more use of common naming conventions and to maintain consistency.
Keep those positions and descriptions of the expressions far away from your CSS, like. Link-blue's class naming will only bring you more work in the future, or make the stylesheet more cluttered when you need to change the blue link to red.
Element naming is best based on what they are, not what they look like. For example: Comment-beta is more versatile than Comment-blue, and. Post-largefont is more restricted than Post-title.

5. Hyphens instead of underscores.
Older browsers parsing CSS underscores are prone to problems or are not supported at all. For better backward compatibility, it's better to use a hyphen character underline.

6. Don't repeat yourself.
Use Group declaration attributes as much as possible, rather than every time you declare them, if you have h1\h2 two elements that use the same font size color margins, then use commas to divide them into one group:
this:

Use CSS abbreviations as much as possible, if the margin values are as follows:

daimaren.cn©2009-2010 by Tomie Zhang

1 2 3 4 5 6 7 8

h1{ margin-top:1em; Margin-right:1em; Margin-bottom:2em; margin-left:3em; } /* Can be abbreviated to * * h1{margin:1em 1em 2em 3em}

7. Optimize the lightweight style sheet.
With the above suggestions, you have greatly reduced the size of the stylesheet, which means faster and easier to maintain and upgrade.
Cut what you don't need to merge as many groups as possible and use the overall CSS framework carefully, and you'll find that there are a lot of things you can't use.
Another suggestion to make CSS smaller is that you don't need to add units for 0, such as 0px, just write 0.

8. First write the basic style for the Gecko kernel browser, and then adjust it on the browser of WebKit and IE kernel.

9. Verification.
If you are stuck, or your layout is not what you want, you can use the validator to verify your CSS, which will show you CSS errors.

10. Keep the CSS scope clean.
By using JS to judge client-side judgments and browser annotations , separate styles from different browsers to separate stylesheets, use this approach to avoid dirty hack appearing on your stylesheet, keeping it clean and better maintained.