Experience summary of CSS style sheet planning and management_Experience exchange

It has been more than a year since I completely abandoned table layout and used xhtml CSS to build websites. After more than a year of practice, I have accumulated a certain amount of experience. Now I am writing this article to summarize it. There is a key issue in the process of using xhtml CSS to build a website: the planning and management of the website's CSS style sheet.

My evolution history of CSS management

When I first used CSS to control website styles, I didn’t know anything about CSS management planning. The CSS I wrote was basically as needed. , add it at any time, and I didn’t think there was anything wrong with it at first, but then more and more were added, and the changes became more and more messy. Although there were some comments, in the end it still gave me a headache just looking at it. At that time, all the CSS of a website was in one file, without planning, and the ordering was not very regular. So I could only find the name of the class in the HTML page, and then search for what I wanted among thousands of lines of CSS code. that.

After a while, after thinking and summarizing, I made a preliminary plan for the CSS style sheet of the site. Three areas are initially divided into the style sheet:

Example Source Code [www.52css.com]
base style sheet
layout style sheet
class style sheet
Wherein " "base style sheet" is used to describe some common things, such as global body, a style, etc.; "layout style sheet" is used to describe a unique id layout, which belongs to the frame layout of the entire page; "class style sheet" " is used to describe the styles of the remaining classes. These styles are divided into reusable styles and styles that usually only appear once or a few times on a special page.

Layout according to this method does improve a lot of efficiency, but this method is only suitable for small and medium-sized websites. The application on large websites is still a bit thin, at least when multiple people collaborate, it cannot achieve the best results. Best efficiency. So there is a relatively complete CSS management planning model summarized below.

More complete CSS style sheet management model

Step1: Individuals or teams need to draw the layout of the main pages hierarchically using a DIV diagram. This DIV diagram is the basis for the design prototype. On the page, mark out the ID names and class names used by the main modules in the page to facilitate the creation of maintenance documents for future modifications and upgrades.

Step2: Divide the CSS structure and establish global css and each module css. Reference the global css in the html page, and reference the css of each module in the global css.

Example Source Code [www.52css.com]
Create global.css as global css, and define global styles such as "* { … } body { … }" in the global css.
Introduce module css through "@import url("xxx.css");" in the global style.
Regarding the division of module CSS, I prefer the CSS division method similar to that in wordpress. Generally, it is divided by a structure similar to the following:

Example Source Code [www.52css.com]
layout. css /* Entire site layout */
public.css /* Public combination style */
header.css /* Page header area style */
sidebar.css /* Sidebar area style * /
main.css /* Main area style */
footer.css /* Bottom area style */
index.css /* Home page area-specific style */
form.css /* Form Class style */
Explain that layout.css is responsible for the layout of the entire website, such as the basic position and style design of #header, #footer and other layouts; public.css is responsible for some common style definitions, because class can be used in a class =”navbar font12px” This method uses the space separation method to apply multiple class styles, so you can define some common classes that are commonly used or need to be modified under special circumstances to facilitate local fine-tuning; header.css, sidebar.css, Modules such as footer.css are css style sheets corresponding to the header, sidebar, and bottom modules. Modules can be added or deleted according to the specific needs of the website; index.css is the css for some unique elements of the homepage. Because of the particularity of the homepage, we When designing CSS, special treatment is usually given to the homepage. Generally, the homepage is the most complex page in CSS. It is necessary to classify and place the unique CSS elements of the homepage. You can also introduce index.css without @import. Put it separately for reference on the homepage; form.css is the style sheet of the form element. Although the form is not difficult, it is still troublesome to control. Put it separately in a css file for easy control. Of course, you can also use other similar elements. Deal with it this way.

Step3: Write styles in each style sheet file.​