CSS style sheet planning and management experience Summary _ Experience Exchange

Completely abandon the layout of the table, using XHTML+CSS to build a station has been more than a year. More than a year of practice has accumulated some experience, and now write this article to summarize. In the process of using XHTML+CSS to build a station, there is a more critical problem: the site's CSS style sheet planning and management.

My evolutionary history of CSS Management

In the initial use of CSS to control the style of the site, it is not clear that the CSS management planning and other things, the CSS is basically written in accordance with the need, at any time to add, just at the beginning did not feel anything bad, but later more and more, the more chaotic, although there are some comments, but to the end still become a headache. At that time, a Web site all the CSS are in a file, no planning, and the order is not too many 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, thinking about the summary, I have the site of the CSS style sheet for the primary planning. Three areas were 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 some common things, such as global body, a style, etc., "layout style sheet" is used to describe the unique ID layout, which belongs to the frame layout of the whole page, and the "class style sheet" is used to describe the style of the remaining class class. Such styles are divided into reusable styles and styles that typically occur only once or several times on special pages.

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

A more comprehensive CSS style sheet management model

Step1: An individual or team needs to draw the layout of the main page with a Div graph, which is based on the design of the prototype, the main module used in the page ID name, class name, easy to set up maintenance documents for future modification and upgrade.

Step2: The CSS structure is divided, the global CSS and the module CSS are built. Refer to the global CSS in the HTML page and reference each module CSS in the global CSS.

Example Source Code [www.52css.com]
Establish GLOBAL.CSS as global CSS, define "* {...}" in Global CSS. The global style.
In the global style, through the @import url ("Xxx.css"); Introduce module CSS.
About Module CSS Division, I prefer to like WordPress in the CSS partitioning, generally by similar to the following structure division:

Example Source Code [www.52css.com]
LAYOUT.CSS/* Entire Station layout */
PUBLIC.CSS/* Common Combo style */
HEADER.CSS/* Page Header area style */
SIDEBAR.CSS/* side bar area style */
MAIN.CSS/* Body Area style */
FOOTER.CSS/* Bottom area style */
INDEX.CSS/* Home area-specific style */
FORM.CSS/* Form class style */
To explain, 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 a class can use class= "NavBar FONT12PX "This uses the middle space separation method to apply multiple class styles, so you can define some more commonly used or in special cases need to modify the common class, convenient local fine-tuning; Header.css, Sidebar.css, Footer.css and other modules are corresponding to the head, sidebar, the bottom module of the CSS style sheet, according to the specific needs of the site to increase or decrease the module Index.css is some of the home page unique elements of the CSS, because of the particularity of the home page, we design the CSS usually on the homepage for special processing, in general, the home is the most complex CSS page, it is necessary to the home page of the unique CSS elements of the collation placement, you can not use @ Import introduced Index.css, and put it on the first page of the reference; Form.css is a form element of the style sheet, although the form is not difficult, but it is more cumbersome to control, placed in a CSS file for easy control, of course, similar to other elements you can handle.

Step3: Writes a style to each style sheet file.

