How to manage CSS good style

Css

Learning Web standards Friends are generally from the study of CSS began, why? Because CSS is a very interesting language, it can make our web pages ever-changing. Maybe we started the contact only because the link style changes, and then slowly found the strong and simple CSS, so we use it to control the entire page layout, typesetting, color, pictures and so on. After learning CSS we will find that the structure of XHTML is more important, a good XHTML structure can make CSS a lot less cost. It also avoids the difference between Web pages in different browsers. So I began to learn the XHTML code, and continue to explore the characteristics of the structure of XHTML. will be able to write CSS, but also understand the importance of XHTML structure and flexible application of the time, is not it. Perhaps this time we will find that the management of the style is also very important.

Everyone may have their own way of management, because the types of Web pages to be applied may be different management ideas, here I just put my style management to do a collation. is to provide you with a reference and research examples, for the lack of form their own management methods to provide a reference model for friends.

My style management is for a single project, a single style system of the site, generally such sites are small and medium-sized sites, style is consistent. For large web sites, or a very different style of the Web site system is not applicable. We should first think about the maintainability of the style before we do the style. Once the need to modify the need for rapid and convenient, the cost of modification is very high, so we should try to avoid such a work occupied by the expansion of time. Then we need to separate the style from the structure code. Here's a look at my directory allocation method:

Among them, [images] is to store the images that appear in XHTML, [Jonstyle] I called the theme package, in the style package includes [CSS], [img], [JS] stored CSS style sheet, the style sheet referenced in the picture, the page used in JS. Here stored pictures [img] and outside of [images] Although all are stored pictures, but the nature of the picture here is not the same. [img] is a picture referenced in CSS, all pictures are displayed or not are related to CSS style, his attribution is that [img] in the picture is attributed to CSS, rather than XHTML. CSS does not refer to a picture in [images]. The pictures in [images] only belong to xhtml,xhtml and do not use the pictures in [img] directly.

Here [JS] also put in the [Jonstyle] folder may be some people feel wrong, my consideration is this: behavior and style is to make this XHTML structure can be colorful. When we need to change the skin, there is also a need to change the behavior. For example: In the first scenario, the content of a block is scrolled up and down, but in the second scenario, the block needs to scroll around. This behavior also needs to be replaced with the sample worker. Of course, the actual application of the time is not necessarily such a simple reason.

Basically, the big structure is this way. What about the structure of the style sheet? That's how I split it: The style pack has a base.css (basic shared Style) Module.css (module style) forms.css (form style) mend.css (patch style) print.css (print style)

Where Base.css is a basic style, that is, the common style of all Web pages, this style and module.css fit can basically show the normal page. Forms can also be useful for style management of forms in different places. Web standards involve compatibility, so you need to have a style patch and of course it's targeted here. The last print style, which is provided for print settings.

I through this division, in the maintenance and site of the sample work update, it is very easy, basically can not need the program personnel to participate in the site can complete the replacement of the skin. If a site has many subject packs at once, you can use a different style as long as you simply replace the name of the subject package in XHTML. This with the site's program will be able to make very good, with a strong extensibility of the application site!

The above content of the relatively limited, I hope that the style of the management of a little help!