10 habits to improve the efficiency of writing CSS code

This article introduced to improve the efficiency of writing CSS code 10 habits, see feel good, you can learn. The bottom of the article has the original link.

1, maintain consistency.

Like anything else, it's worth keeping consistency. Keep it consistent, instead of naming the ID and class for what you think.

The cascading style of CSS helps to deepen your memory, and you can use the inheritance of styles to set style sheets.

Declare the style of the generic part first, and then continue declaring that it is not generic. It's easier to cover a particular style when you need it. Because styles are easier to read and more logical, you'll find it quicker to write CSS.

Use a way that is best for you.

Reset and overwrite

Links and types

Main layout

Two times layout structure

Form elements

Miscellaneous

2. Note Title, date and signature

When the style is rewritten, it is easy to find the creator of the original style when the problem is encountered. This is also a good habit when designing templates or themes.

Hold on... What is swatch colors (swatch color)? Based on years of experience, I've found that adding a generic color list annotation to a style sheet can be very helpful in starting code and maintaining code later.

Saves you the steps to turn on Photoshop to get a color or to open a Web site's style guide document. When you need to specify the blue, scroll to the top of the note to find the relevant color code to copy it.

3, sorting out a set of template Library

Once you decide to use a structure, delete the parts that are not superfluous and leave the main frame and save a generic style template for later use.

Also you can save multiple versions of the templates that have adapted to different structure sites.

such as: 2 column layout, blog layout, etc. ..... Coda (the editor under the Apple System) http://www.panic.com/coda/has a strong editing function that makes writing code easier. Other editors also have the ability to experiment with the same batch file, which works very nicely.

If you start from scratch every time, especially every time you write the same style with the same habits and methods, you will get mad.

4. Use useful naming rules

Especially when I declare the ID of a column and name them both Col-alpha and Col-beta. Why not call Col-left and col-right?

Always need to think about future editors.

Next year you'll need to redesign your site and move the left and right sidebar. You should not rename your HTML element by simply changing the location and renaming your style ID.

Of course, you just need to redefine the location of the left and right columns of the element and keep this ID still #col-left, but there are confusing questions? If it is called left, do not expect it to always be in the right place. This will not give you too much space to name after moving the element.

One of the advantages of CSS is the ability to make content realistic in different styles. When you refactor a website, you can simply modify the CSS without modifying the HTML.

Therefore, do not let the name of the CSS because of limitations. By using more generic naming conventions and maintaining consistency.

Give a fixed name to the position or style. such as naming a called. Link-blue class will keep you in trouble, and when customers ask you to change the blue color of the link to Orange, it will make your style become messy.

So naming the rules is based on what they are, not what they look like. For example

General aspects:. Comment-deta > Comment-blue

Constraints:. post-title > Post-largefont

. Comment-deta more general, post-title less constrained.

5. Use hyphens without underlining

Some older browsers have problems getting an underlined CSS, or they don't support underlining.

Therefore, in order for the code to have better backward compatibility, it is a habit to cultivate the use of hyphens. Use #col-alpha instead of using #col_alpha.

6. Avoid duplicate definitions

Duplicate properties avoid duplicate definitions as much as possible, and you need to group the attributes of the element. If your H1 and H2 elements are all using the same font size, color, and border, they are fully and can be merged into a group definition.

Use the shorthand for the style as much as possible. It is often abbreviated to combine and define some of the same defined elements.

Detailed wording:

Simple wording:

It is very important that you understand the shorthand for the clockwise, lower, left, and right of CSS explanations.

In addition, if your top and bottom, or the left and right attributes are the same, you only need two names.

The example means the distance between the top and the bottom is 1em, the distance is about 0em.

7, optimize the style lightweight.

Use the tips above to really reduce the size of your style sheet. The smaller the easier to load, the smaller the easier to maintain and update.

Use grouping as much as possible to remove unwanted styles.

Another kind of CSS common shorthand: When the value is zero, you can not specify the unit of measure. If the margin is set to 0, you do not have to define 0px or 0em. No matter what unit is measured 0 is 0, and CSS is recognizable.

8, the code based on Firefox written, and then for the WebKit kernel browser and IE browser to adjust

First of all, to solve the CSS in Firefox browser some of the headaches of the problem. If the CSS has problems under Firefox, other browsers are more likely to have problems.

9, to verify

Verify using the CSS Validator for the consortium. If you insist that your layout has nothing to modify, you can use the CSS validator to help you find the error.

10, maintain the cleanliness of the page

Supports individual browsers using separate CSS style sheets, while JavaScript requires styles, server-side styles, and comment styles. This will avoid some unnecessary IE hack. This is the only way to ensure the cleanliness and manageability of the style.