Experience of CSS style sheet planning and management _ Experience Exchange

Completely abandoned the form layout, the use of Xhtml+css station has been more than a year. More than a year of practice has accumulated some experience, and now write this article to sum up. In the process of using XHTML+CSS to build a station, there is a key problem: The Web site's CSS style sheet planning and management.

My CSS management History of evolution

When you first use CSS to control the style of your Web site, it's not clear what CSS management planning is like, the written CSS is basically in accordance with the needs, at any time to add, just at the beginning did not think there is anything bad, but then more and more, the more the more chaos, although there are some comments, but to the end or become let me look at all headaches. At that time, a Web site all the CSS in a file, there is no planning, and sorting is not a lot of rules, so you can only find the name of the class in the HTML page, and then in thousands of lines of CSS code to search for the one you want.

After a while, after summing up my thoughts, I made a preliminary plan for the site's CSS style sheet. Three areas are initially divided in the style sheet:

Example Source Code [www.52css.com]
Base style sheet
Layout style Sheet
Class style Sheet
The "Base style sheet" is used to describe something public, such as the overall body, a style, and so on; the "layout style sheet" is used to describe a unique ID layout, a frame layout that belongs to the entire page, and a class style sheet to describe the style of the remaining class class. This style is divided into reusable styles and styles that usually appear only once or several times on a particular page.

In this way the layout does improve the efficiency, but this approach is only suitable for small and medium-sized sites, on the large web site application or slightly thin, at least when the collaboration of many people do not achieve the best efficiency. So there is the following summary of the more complete CSS management planning model.

A more complete CSS style sheet management model

Step1: The individual or team needs to be the layout of the main page with a Div diagram of the pattern, this div chart is based on the design prototype, the main module used in the page ID name, class name, to facilitate the establishment of maintenance documents for future modifications and upgrades.

Step2: Divides the CSS structure, establishes the global CSS and each module CSS. Referencing the global CSS in the HTML page, referencing each module CSS in the global CSS.

Example Source Code [www.52css.com]
Establish GLOBAL.CSS as global CSS, define "* {...}" in global css "* {...}" such as the global style.
Through the "@import url (" Xxx.css ") in the global style; Introduce module CSS.
On the module CSS Division, I prefer similar to wordpress css in the form of classification, under normal circumstances, by similar to the following structure division:

Example Source Code [www.52css.com]
LAYOUT.CSS/* Whole Station layout * *
PUBLIC.CSS/* Common combination style * *
HEADER.CSS/* page Head area style * *
SIDEBAR.CSS/* side bar area Style * *
MAIN.CSS/* Main area style * *
FOOTER.CSS/* Bottom area style * *
INDEX.CSS/* Home area unique Style * *
FORM.CSS/* Form class style * *
Explain that LAYOUT.CSS is responsible for the layout of the entire site, such as #header, #footer等布局的基本位置及样式设计; Public.css is responsible for some common style definitions, because class= can be used in one class NavBar FONT12PX "This use of the middle space-delimited method to apply multiple class styles, so you can define some more commonly used or in special circumstances need to modify the common class, convenient local fine-tuning; Header.css, Sidebar.css, FOOTER.CSS module is corresponding to the head, sidebar, the bottom of the module CSS style sheet, according to the specific needs of the site to increase or decrease the module Index.css is a number of unique elements of the home page CSS, because of the specificity of the home page, we are in the design of CSS usually on the home page for special treatment, under normal circumstances, the first page is the most complex CSS pages, it is necessary to the homepage of the unique CSS elements to classify, you can not Import into the index.css, and put it alone on the first page reference; Form.css is a FORM element style sheet, although the form is not difficult, but control is still more troublesome, separate into a CSS file for easy control, of course, similar to other elements you can do.

Step3: Write styles in individual style sheet files.