How to manage the css style of a website

Source: Internet
Author: User

Friends who learn WEB standards generally start learning CSS. Why? Because CSS is a very interesting language, it can make our webpage ever-changing. Maybe our first contact was because the style of the link was modified, and then we found that CSS is powerful and simple, so we use it to control the layout, layout, color, and image of the entire webpage. After learning CSS, we will find that the structure of XHTML is more important. A good XHTML structure can reduce the cost of CSS. At the same time, it will avoid differences between web pages in different browsers. As a result, I began to learn the XHTML code and constantly explored the features of the XHTML structure. I can write CSS, understand the importance of the XHTML structure, and use it flexibly. We may find that style management is equally important.
You may already have your own management method, because different webpage types may be managed differently. Here I just want to organize my style management. This is an example of reference and research, and a reference model for friends who do not have their own management methods.
My style management is intended for websites with a single project and a single style system. Generally, such websites are small and medium websites with the same style. It is not applicable to large websites or websites with different styles. Before creating a style, we must first consider the ease of maintainability of the style. Once modification is required, it must be fast and convenient, and the cost of modification is very high. Therefore, we should try our best to avoid the extended time occupied by such work. Then we need to separate the style from the structure code. Next, let's take a look at my Directory allocation methods:
[Images] is used to store images that appear in xHTML. [jonStyle] is a theme package, the style packages include [CSS], [img], and [js], which respectively store the CSS style sheet, the image referenced in the style sheet, and the JS used in the webpage. Although [img] and [images] are used to store images, the nature of the images here is different. [Img] is the image referenced in CSS. The display of all images is related to CSS styles. Its attribute is that the images in [img] belong to CSS, instead of XHTML. CSS does not reference images in [images. Images in [images] belong to xHTML only, and do not directly use images in [img.
Some people may think that [js] is also placed in the [jonStyle] Folder. My consideration is this: the behavior and style book make the XHTML structure colorful. When we need to change the skin, we also need to change this behavior. For example, in the first solution, the content of a block needs to be rolled up or down. However, in the second solution, the block needs to be rolled around. This behavior also needs to be replaced with the sample engineer. Of course, the actual application is not necessarily such a simple reason.
This is basically the case for a large structure. What is the structure of the style sheet? This is my division: the sample package contains a base.css(basic common sample module.css(example forforms.css (single sample )mend.css (printprintprint.css (print style)

Contact Us

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.