Web page Production Knowledge: A brief introduction to CSS coding and organizational skills

css| Code | tips | Web page

How do I make CSS code simple and easy to write? This is probably a problem that many developers are concerned about. I think that there's probably no magic to make sure you shrink your stylesheet to a percentage of it, but reasonable CSS coding and organizational skills can help you write more efficient and efficient code more efficiently, and naturally, the reduction in stylesheet size can reduce the time to download.

　　Organize your style sheet

Although we have various CSS development tools, such as TopStyle, such as Stylemaster, which allows you to define what rules are defined in the current stylesheet, which classes and which IDs are visible, this does not mean that your stylesheet is organized and written, With the change is probably our common way of development, the first style sheet has a bit of level, the back here to add a little, there is more and more chaos. So you might consider standardizing your way of writing.

There are probably two ways of organizing, one of the things that we use to put together all the rules that describe the same element (and its child elements) is that you don't have to flip through the entire stylesheet if you need to look at what rules affect an element in the page.

The other one is worth reference, that is, the rules describing some attributes are placed in one place, where the description of the other features is placed in another place, such as the definition of the color, in the color.css file, the definition of the font, the definition of the FONT.CSS, the description of the layout, and the layout.css. This also makes your style sheet structure clear and easy to understand. The biggest advantage is that if you want to change a set of color schemes, you can just change the color.css, without worrying about whether other rules will affect the color of the page.

In the traditional program design, we often mention how the style of the program is important, good coding style is even more important than mastering the grammar and semantics of the program, although WEB designers do not necessarily have to master the skills of programming, but the development of a good CSS writing style is indeed very useful.

　　Using attribute Abbreviations

The introduction of attribute abbreviation can refer to other related articles, here we summarize:

First, there are several commonly used attribute abbreviations:

Font
Background
List-style
Margin
Border
Padding

Most of them can be combined with several general properties, that is, you can give these denoted attributes several values, separated by a space between each value.

Third, margin, border and padding all follow the principle of clockwise, if given four values, from the top start each clockwise turn 90 degrees.

If three values are given, the upper side is one, the same one, the lower side.

If given two values, it is the upper and lower, the left and right.

If only one value is given, it is all the same.

The use of the denoted attribute (attribute abbreviation) is a matter of opinion, on the one hand, it really can shorten the code greatly (if used frequently), on the other hand, the modification is not intuitive and inconvenient.

　　Take advantage of inheritance and default values

Also, see the relevant chapters in the writing efficient CSS, I think, this also has to be considered, first of all, the inheritance and default values are not strictly (must) in the standard of the consortium (BTW, even if so?) , browsers may not really be implemented as you expected, and are the defaults for some properties really 0? Is it 0 in all browsers? Experience after repeated attempts; Moreover, if the code contains too much such a "metaphor", it is not very good to read, certain elements will show a certain characteristics, but inherited from its parent elements ... On the day you write the stylesheet, you may also be aware that after a period of forgetting, it would be strange to know why you didn't define the rule and then show that trait.

Therefore, if you want to use inheritance and defaults to simplify the code, it is best to write down some comments to explain.

　　Take advantage of multiple class and multivariate selectors

An HTML element can belong to more than one class, such as:

<TD class= "Subtotal Negative" > (-$422.72) </td>

You can set a style for those table columns that contain negative numbers, and then add them to the table columns that include them:

Example Source Code [www.52css.com]
. Subtotal {Font-weight:bold}
. Negative {color:red}

This feature sometimes allows you to skillfully implement some functions, that is, shorten the HTML code, and clear the CSS rules.

For more information about multiple classes, including the compatibility test for selectors ... please refer to 52css.com's related articles.

　　Summary

Choose a way to organize your CSS rules and stick with it!
Use caution in writing that can be abbreviated, but will affect readability!
Timely understanding of some of the CSS2 new features have been generally realized, can greatly facilitate your design!